如何在点击时设置活动课程？答案

【问题标题】：How to set active class on click?如何在点击时设置活动课程？
【发布时间】：2015-12-11 15:54:38
【问题描述】：

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

<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');        
    });
});

【问题讨论】：

你没有关闭</ul>。
您在 menu-item-46 上的类也不正确
在导航到下一页之前，您需要先使用本地存储来存储您的最后一个活动课程

标签： jquery

【解决方案1】：

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

没有测试，现在才写，不过是这样的：

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

您还可以使用 data-attributes 而不是 href 进行比较，这可能会更容易一些，并且更可定制以处理索引页面等奇怪的情况。当然，由于您是从服务器获取 html，您可以让服务器也将活动类放在适当的链接上。

【讨论】：

我试过了，但它不起作用...如果声明永远不正确
然后调试它。 console.log href 和 $(e).attr('href') 看看为什么它不能在另一个中找到一个。

【解决方案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');      
    }
});

【讨论】：

【解决方案3】：

首先，关闭<ul>。

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

【讨论】：