首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

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

2013-08-01 
动态左侧列表点击变色的问题http://www.keenstar.net/NewsCenter/GroupNews.aspx请问这种效果左侧点击变色

动态左侧列表点击变色的问题
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
[解决办法]

引用:
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>

热点排行