Question

我有以下HTML菜单：

<div class="nav">
            <ul>
                <li class="first"><a href="/">Home</a></li>
                <li><a href="/something/">Something</a></li>
                <li><a href="/else/">Else</a></li>
                <li class="last"><a href="/random/">Random</a></li>
            </ul>
            <ul style="float:right;">   
                <li class="first last"><a href="/news/">News</a></li>
            </ul>
        </div>
    </div>

然后我有以下代码：

jQuery(function($){
    var current = location.pathname;
    $('.nav ul li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

代码运行良好，但是有问题。例如，如果我看到主页（www.example.com），则所有菜单链接都会收到活动的类。另一个问题是它对www.example.com/something很好用，但是如果我访问www.example.com/something/1等，它就不能保持活动状态。您知道如何解决这个问题吗？预先感谢！

Answer 1

使用下面的jQuery代码添加active类：

$(function() {
      var pgurl = window.location.href.substr(window.location.href
         .lastIndexOf("/") + 1);
      $(".nav ul li a").each(function() {
         if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
            $(this).addClass("active");
      })
   });

Answer 2

对于首页，在列表中添加额外的类“默认”。

<li class="first default"><a href="/">Home</a></li>

jquery代码。

 jQuery(function($){
        var current = location.pathname;
        console.log(current);
        //remove the active class from list item. 
        $('.nav ul li a').removeClass('active');

        if(current != '/'){
            $('.nav ul li a').each(function(){
                var $this = $(this);
                // if the current path is like this link, make it active
                if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
                    $this.addClass('active');
                }
            })
        }else{
             console.log('home');
            $('.default a').addClass('active');
        }
    })

Answer 3

通过使用indexOf（），您正在检查链接的目标是否与当前位置相同。

您想要的不是“相同的URL”，而是“相同的模式”，所以我倾向于使用正则表达式：

let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
    $(this).addClass("active");
}

请注意，这将迫使您为指向主页的链接创建单独的解决方案，否则它将始终处于活动状态。

基于当前URL问题的主动导航类

3 个答案: