选择导航列表项时需要切换“活动”类

Posted 2023-05-08

【中文标题】选择导航列表项时需要切换“活动”类

【英文标题】：Needs to toggle 'active' class when navigation list items are selected

【发布时间】：2013-02-12 09:10:45

【问题描述】：

我正在使用 twitter 引导程序并尝试在选择列表项时使用 jquery 将“活动”类设置为导航列表项。

下面是我的代码

            <ul class="nav nav-pills pull-right">
              <li id="home"><a href="/">Home</a></li>
              <li id="gadget"><a href="/category/gadgets"><span>Gadgets + Geeky</span></a></li>
              <li id="toys"><a href="/category/toys"><span>Toys</span></a></li>
              <li id="wearables"><a href="/category/wearables"><span>Wearables</span></a></li>
              <li id="home_office"><a href="/category/home-office"><span>Home + Office</span></a></li>
              <li id="food_drinks"><a href="/category/food-drinks"><span>Food + Drinks</span></a></li>
              <li id="kids"><a href="/category/kids"><span>Kids Stuff</span></a></li>
            </ul>
            <script>
              $( document ).ready(function() 
                 $('ul li').click(function() 
                    // remove classes from all
                    $('li').removeClass('active');
                    // add class to the one we clicked
                    $(this).addClass("active");
                 );
              );
            </script>

但是当我单击列表项时，导航项上设置了临时活动类，但页面正在刷新并显示当前单击的列表项而没有活动类。

我已按照Toggle active class in nav bar with JQuery 中提到的说明进行操作 没有成功。

谁能指出我错过了什么。

谢谢

【问题讨论】：

当您刷新页面时，它将重置为默认状态，从外观上看，没有设置为活动状态。为了做你想做的事，不使用服务器端语言，你需要设置一个cookie，其值为点击的LI。

@crush 说了什么。页面刷新时不会继承你使用javascript应用的效果。

@crush - 感谢您的回复

您可以使用 css (a:active) 将类添加到活动链接，然后使用 jquery 将活动类添加到离该链接最近的 li。

@ssilas777 你能举个例子吗？不好意思问，我刚接触网络开发。

【参考方案1】：

这个脚本在重定向发生后运行，所以这应该适合你。我们正在向活动链接添加一个虚拟类“activeLink”，并根据该活动链接选择列表。

 $(function()
        $('ul li a').removeClass('activeLink');
        var url = window.location.pathname, 
            // create regexp to match current url pathname also to match the home link
            urlRegExp = new RegExp(url == '/' ? window.location.origin + '/?$' : url.replace(/\/$/,'')); 
            // now grab every link from the navigation
            $('.ul li a').each(function()
                // and test its normalized href against the url pathname regexp
                if(urlRegExp.test(this.href.replace(/\/$/,'')))
                    $(this).addClass('activeLink');
                
            );

           $('li').removeClass('active');
           $('a.activeLink').closest('li').addClass('active');
    )

;