javascript - 加载期间附加 CSS 类问题

Question

我想在页面重定向后将“active”类附加到选定的 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");

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