<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>标签示例</title>
<style type="text/css">
BODY { font-size: 14px; font-family: "宋体"; }
OL LI { margin: 8px; }
#con { font-size: 12px; margin: 0px auto; width: 600px; }
#tags { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 0px 10px; width: 400px; padding-top: 0px; height: 23px; }
#tags LI { background: url(images/tagleft.gif) no-repeat left bottom; float: left; margin-right: 1px; list-style-type: none; height: 23px; }
#tags LI A { padding-right: 10px; padding-left: 10px; background: url(images/tagright.gif) no-repeat right bottom; float: left; padding-bottom: 0px; color: #999; line-height: 23px; padding-top: 0px; height: 23px; text-decoration: none; }
#tags LI.emptyTag { background: none transparent scroll repeat 0% 0%; width: 4px; }
#tags LI.selectTag { background-position: left top; margin-bottom: -2px; position: relative; height: 25px; }
#tags LI.selectTag A { background-position: right top; color: #000; line-height: 25px; height: 25px; }
#tagContent { border-right: #aecbd4 1px solid; padding-right: 1px; border-top: #aecbd4 1px solid; padding-left: 1px; padding-bottom: 1px; border-left: #aecbd4 1px solid; padding-top: 1px; border-bottom: #aecbd4 1px solid; background-color: #fff; }
.tagContent { padding-right: 10px; display: none; padding-left: 10px; background: url(images/bg.gif) repeat-x; padding-bottom: 10px; width: 576px; color: #474747; padding-top: 10px; height: 350px; }
#tagContent DIV.selectTag { display: block; }
</style>
</head>
<body>
<div id="con">
<ul id="tags">
<li><a onclick="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</a>
</li>
<li class="selectTag"><a onclick="selectTag('tagContent1',this)" href="javascript:void(0)">
标签二</a> </li>
<li><a onclick="selectTag('tagContent2',this)" href="javascript:void(0)">自适应宽度的标签</a>
</li>
</ul>
<div id="tagContent">
<div class="tagContent" id="tagContent0">
第一个标签的内容</div>
<div class="tagContent selectTag" id="tagContent1">
第二个标签的内容</div>
<div class="tagContent" id="tagContent2">
第三个标签的内容</div>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent, selfObj) {
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for (i = 0; i < taglength; i++) {
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for (i = 0; j = document.getElementById("tagContent" + i); i++) {
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>
许多情况下，asp.net 在 Page_Load 事件中需要动态生成控件，这对于一些新手，包括我在内，会因为回传控件消失，或重复叠加控件等原因搞得头大，经过我翻阅资料和自己的实践，以博客评论页为例，把整个框架写在下面，仅供参考。
<asp:Panel>
<asp:Panel 记录索引 3 >
<asp:Label 昵称 /> <asp:Label 时间 /> <asp:LinkButton 支持按钮_3 /> <asp:LinkButton 删除按钮_3 /> 1楼
</asp:Panel>
<asp:Panel 记录索引 5 >
<asp:Label 昵称 /> <asp:Label 时间 /> <asp:LinkButton 支持按钮_5 /> <asp:LinkButton 删除按钮_5 /> 2楼
</asp:Panel>
</asp:Panel>
记录索引是指数据库中的自动编号。
支持按钮触发事件 LinkButton_support_Click(object sender, EventArgs e)
删除按钮触发事件 LinkButton_del_Click(object sender, EventArgs e)
所有子 Panel 和内部的所有控件都是在 Page_Load 事件中动态创建的，并且不能被嵌套在 if(!IsPostBack)
“点支持累计点击数”和“点删除删除一条记录”都是需要操作数据库的，我以前的做法是操作完数据库后 .Clear() 掉所有控件，再重新生成一次，这样既浪费服务器资源，又容易出现界面上的混乱，譬如显示了两遍该文章的评论。
其实上面代码中 Panel 套 Panel 的好处就是可以根据索引直接删除相应控件，然后直接在页面呈现，而省去上述烦恼。至于累计支持数就更简单了，下面的代码可以轻松解决问题：
string n = ((Label)Panel_commentLists.FindControl("Label_against_" + id)).Text;
n = (Convert.ToInt32(n) + 1).ToString();
((Label)Panel_commentLists.FindControl("Label_against_" + id)).Text = n;
如果有修改和添加评论操作，同样道理，不要重复地全部 .Controls.Add 一次。为了添加时追加一个子 Panel 方便，建议在 Page_Load 的地方传参使用方法来做。
补充：在现在的开发中，我更喜欢用动态生成TableRow,TableCell来操作。
