Question

我正在尝试使用jquery创建带有动态活动菜单的导航栏。我已经有了代码，除了1件事外，它都可以正常工作

$(document).ready(function(){
          $('ul li a').click(function(){
            $('li a').removeClass("active");
            $(this).addClass("active");
            return false;
          });
}); 

 <li class="nav-item">
     <a class="nav-link" href="index.php?page=logout">Logout</a>
 </li>

上面的代码有效，当我单击<a>标签时，我得到一个活动菜单。仅<a>标记无效。当我推荐return false时，<a>标记有效，但是我没有一个活动的类。我也尝试过e.preventDefault()，但随后阻止了标签的执行。我知道return false中的preventDefault()函数必须停止在我的代码上执行。但是我该如何解决呢？

我希望我的活动类具有动态性，并且标签仍在执行。

Answer 1

您要转到新页面，因此在页面加载后状态会丢失，您需要将状态发送到新页面，您可以使用该getWidth() returns 0 if set by android:layout_width="match_parent"

$(document).ready(function(){
          var state = localStorage.getItem('activeLink');//get the state from localstorage
          if(state !== null && state.length) {
           $('.nav-link[href="'+state+'"]').addClass('active');//set the active class

          }
          $('ul li a').click(function(){
            $('li a').removeClass("active");
            $(this).addClass("active");
            localStorage.setItem('activeLink',$(this).attr('href'));//save the clicked link in localstorage
          });
}); 

 <li class="nav-item">
     <a class="nav-link" href="index.php?page=logout">Logout</a>
 </li>

Answer 2

这只班轮怎么样？

<script>
    $(function () {
        $("a[href='"+window.location.pathname+"']").prop("href", "#")
        .addClass("active");
    });
</script>

您无需再等待click事件。上面的代码将尝试在dom中找到该url，并将添加active类并通过将其实际URL替换为#来禁用url路由。

将上面的代码放在body标签和...瞧前面。

JQuery活动类标签未执行

2 个答案: