Question

我编写的代码在单击导航栏时添加了类活动。

JS：

$(".nav li a").on('click', function(e) {                                                                                                               
    $(".nav .active").removeClass('active');                                                                                                            
    console.log($(this));                                                                                                                               
    $(this).parent().addClass('active');                                                                                                                
    e.preventDefault();                                                                                                                                 
});

HTML：

<ul class="nav navbar-nav">                                                                                                                         
    <li><a href="/board/math">math</a></li>                                                                                                 
    <li><a href="/board/english">english</a></li>                                                                                                             
    <li><a href="/board/interstellar">interstellar</a></li>                                                                                                  
    <li><a href="/board/science">science</a></li>                                                                                                      
</ul>

如果点击li代码，则会添加有效类。但它不能移动页面进行href链接。

我该如何解决这个问题？

Answer 1

您需要做的就是：

var pathname = window.location.pathname
$('.nav li a[href="'+pathname+'"]').addClass("active");

由于点击链接会刷新页面，因此您必须根据网址中的路径名设置活动类。

如果您在网址中有其他参数，则可以这样做：

$('.nav li a[href^="'+pathname+'"]').addClass("active");

Answer 2

问题在于您对要求的处理方法。

没有必要使用点击处理程序，而是在dom ready中你可以做任何一个

$('.nav li a[href$="'+window.location.pathname+'"]').addClass('active');

或

var path = window.location.pathname;
$('.nav li a').each(function(){
    return path.indexOf($(this).attr('href'))>-1
}).addClass('active');

为什么过渡到页面不起作用？

2 个答案: