Question

所以我在我的标题上有这个导航，但问题是当我点击链接并将我重定向到该页面时它会失去活动类。有什么建议吗？

<nav>
  <div class="menu-topmenu-container">
    <ul id="menu-topmenu" class="menu">
      <li id="whats-on" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53">
         <a href="#whatson" class="active">What’s On</a>
      </li>
      <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">
         <a href="visiting-us">Visiting Us</a>
      </li>
      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-46">
        <a href="collections-research">Collections &amp; Research</a>
      </li>
      <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
        <a href="learning">Learning</a>
      </li>
      <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
          <a href="get-involved">Get Involved</a>
      </li>
   </div>
</nav>

这是我的剧本：

jQuery(function($){
    $('nav ul li a').on('click', function () {
        $(this).closest('nav ul').find('a.active').removeClass('active');
        $(this).addClass('active');        
    });
});

Answer 1

这是因为当您点击链接时，您会转到另一个页面。

未经测试，现在就写了这个，但是这样的话：

$(function(){
  var href=window.location.href;
  $('nav a').each(function(e,i){
    if (href.indexOf($(e).attr('href'))>=0)
    {
      $(e).addClass('active');
    }
  });
});

您还可以使用数据属性而不是href进行比较，这可能会更容易一些，并且可以更自定义地处理像索引页这样的奇怪情况。当然，既然您从服务器获取了html，那么您也可以让服务器将活动类放在适当的链接上。

Answer 2

好像您可能导航到新页面，您应该将ID存储在本地存储中，如下所示：

$('body').on('click', 'nav ul li a' , function () {
    $(this).closest('nav ul').find('a.active').removeClass('active');
    localStorage.setItem('lastActiveId', $(this).attr('id'));      
});

然后在加载时你需要设置它

$(function () {
    var lastId = localStorage.getItem('lastActiveId', $(this).attr('id'));
    //check if defined
    if(!!lastId)
    {
        $('#' + lastId).addClass('active');      
    }
});

Answer 3

首先，关闭<ul>。

嗯，在我看来，用PHP做你想做的事情会更容易。也许this可以帮到你。

如何在点击上设置活动类？

3 个答案: