动态左侧列表点击变色的问题
http://www.keenstar.net/NewsCenter/GroupNews.aspx
请问这种效果左侧点击变色，而其它没点击的则还原成原来的颜色的效果是如何实现的？
静态的我会，关键是加上链接，选中的效果不会保留，也就是href=1.aspx，这样刷新后就还原了，看不到效果。
而我弄了一个可以变色的。如下：
前后：
<style type="text/css">
.nav04_live
{
background-color: yellow;
}
.nav04
{
color: Red;
}
</style>
<ul style="width: 200px; background-color: #ccc;">
<li class="nav04" id="list1" runat="server"><a href="1.aspx?id=1">森明研究 </a></li>
<li class="nav04" id="list2" runat="server"><a href="1.aspx?id=2">行业动态</a></li>
<li class="nav04" id="list3" runat="server"><a href="1.aspx?id=3">政策法规</a></li>
</ul>
后台：
if (Request.QueryString["id"] != null)
{
int id = int.Parse(Request.QueryString["id"].ToString());
switch (id)
{
case 1:
list1.Attributes["class"] = "nav04_live";
Page.Title = "森明研究";
break;
case 2:
list2.Attributes["class"] = "nav04_live";
Page.Title = "行业动态";
break;
default:
list3.Attributes["class"] = "nav04_live";
Page.Title = "政策法规";
break;
}
}
可是如果左边的列表是动态生成的呢，比如说有多个，后台那个swith如何判断？如何调用动态生成的li的id?
http://www.cnblogs.com/insus/p/3207936.html
[解决办法]
根据你的要求写的：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<style type="text/css">
.nav04_live
{
background-color: yellow;
}
.nav04
{
color: Red;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var id = getQueryStringByName("id");
if (id != null) {
$("#list" + id).addClass("nav04_live");
document.title = decodeURI(getQueryStringByName("name")); //decodeURI解码中文会出现乱码
}
});
//获取QueryString
function getQueryStringByName(name) {
var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
if (result == null
[解决办法]
result.length < 1) {
return "";
}
return result[1];
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul style="width: 200px; background-color: #ccc;">
<li class="nav04" id="list1" runat="server"><a href="WebForm2.aspx?id=1&name=森明研究">森明研究 </a></li>
<li class="nav04" id="list2" runat="server"><a href="WebForm2.aspx?id=2&name=行业动态">行业动态</a></li>
<li class="nav04" id="list3" runat="server"><a href="WebForm2.aspx?id=3&name=政策法规">政策法规</a></li>
</ul>
</div>
</form>
</body>
</html>