Question

我希望在重定向的页面后将“活动”类添加到选定的li。现在的问题是，在我点击li后，CSS类已附加到之前的li。示例：我单击li索引1并单击li索引5.类附加到li索引1，如果单击li索引3，CSS类将重定向后附加到li索引5。

CSS类来自bootstrap

<div  id="mainnav">
  <asp:Menu ID="Menu1" runat="server" role="tablist" Orientation="Horizontal"
            CssClass="nav nav-pills"  ForeColor="Black" RenderingMode="List"
            IncludeStyleBlock="False">

                     <StaticMenuStyle CssClass="nav nav-pills"/>
                        <StaticMenuItemStyle CssClass="MainNavStyle"/>
                 </asp:Menu>
              </div>  

  $(document).ready(function () {
            $('#mainnav li').click(function () {
                $(this).addClass('active');
                var liMainIndex = $(this).index();
//get selected main navigation bar li index and save it in cookie 
                $.cookie("selectednav", liMainIndex);
            });
            $('#SideBar li').click(function () {
                $(this).addClass('active');
//get selected side navigation bar li index and save it in cookie 
                var liSideIndex = $(this).index();
                $.cookie("selectedsidenav", liSideIndex);
            });
        });

        $(function loadnav() {
            debugger
//retrive selected ul li index from cookie and add class to the li
            var liMainIndex = $.cookie("selectednav");
            $("#mainnav li").removeClass("active");
            $("#mainnav li:eq(" + liMainIndex + ")").addClass("active");
            var liSideIndex = $.cookie("selectedsidenav");
            $("#SideBar li:eq(" + liSideIndex + ")").addClass("active");
        });

HTML标记

<div role="tablist" class="nav nav-pills" id="ctl00_Menu1" style="float: left;">
:before
<ul class="level1 nav nav-pills static" tabindex="0" role="menubar"
    style="position: relative;width: auto; float: left;">
::before
  <li role="menuitem" class="static active" style="position: relative; float: left;">
<a class="level1 MainNavStyle static" href="sGroup.aspx?mainid=0&sub=Scale Group"
   tabindex="-1">Store</a>
</li>
<li role="menuitem" class="static" style="position: relative; float: left;">
<a class="level1 MainNavStyle static"
   href="../Data/DepMa.aspx?mainid=1&sub=Department & Main Group" tabindex="-1">
  Data
</a>
</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
::after
</ul>
:after
</div>

Answer 1

 $(document).ready(function () {
            //debugger
            var liMainIndex;
            liMainIndex = '<%= Request.QueryString("mainid")%>'

            $("#mainnav ul li").eq(liMainIndex).addClass("active");
            var liSideIndex = '<%= Request.QueryString("subid")%>'

            $("#SideBar ul li").eq(liSideIndex).addClass("active");          
        });

将在页面加载期间从代码后面生成subid和mainid。所以我所要做的就是从地址栏中获取ID并将索引值分配给

  $("#SideBar ul li").eq(liSideIndex).addClass("active");

并添加一个类来做。问题解决了。我希望这会有所帮助

加载期间附加CSS类问题

1 个答案: