动态左侧列表点击变色的问题

gzlaspnet 2013-07-14 09:27:11

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?

...全文

112 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

joyhen 2013-07-23

打赏
举报

原理说一下，可以用jq的hover函数去控引入的新建样式表

掌握永恒需控制现在 2013-07-23

打赏
举报

引用楼主 gzlaspnet 的回复:

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?

根据你的要求写的：

<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>