Question

我的带有索引的导航菜单被赋予“活动”类。我想要的是在点击其他<li>元素时设置“活动”。但它会切换回index.php。我的意思是：它不是将“活动”类设置为其他<li>，也不是从“home”中删除。

以下是我尝试过使用jQuery，但它不起作用。
出了什么问题？

$('.nav').on('click', 'li', function() {
  $('.nav li.active').removeClass('active');
  $(this).addClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown active">
      <a href="index.php">Home</a>
    </li>
    <li class="dropdown">
      <a href="aboutus.php">About</a>
    </li>
    <li class="dropdown">
      <a href="services.php">Services</a>
    </li>
    <li class="dropdown">
      <a href="contact.php">Contact</a>
    </li>
  </ul>
</div>

Answer 1

当您点击li中的链接时，它会将您带到href属性中的页面并加载它（或重新加载当前页面），消除您使用javascript所做的任何更改。

我认为javascript可能不是你在这里寻找的。我看到你正在使用php，所以我建议使用它来跟踪用户所在的页面。使用php，如果所有页面都包含此列表，您希望在每个页面的顶部执行此类操作：

<?php $pageName = "index"; ?> // aboutus, services etc.

然后在你的li中添加如下内容：

<li class="dropdown <?php if (pageName === "index") echo "active"; ?>">
    <a href="index.php">Home</a>
</li>
<li class="dropdown  <?php if (pageName === "aboutus") echo "active"; ?>">
    <a href="aboutus.php">About</a>
</li>

如果您在每个页面上手动重新创建此列表（不推荐），您可以像这样重写每个页面：

首页

<li class="dropdown active">
    <a href="index.php">Home</a>
</li>
<li class="dropdown">
    <a href="aboutus.php">About</a>
</li>

关于我们页面

<li class="dropdown">
    <a href="index.php">Home</a>
</li>
<li class="dropdown active">
    <a href="aboutus.php">About</a>
</li>

等

Answer 2

您的代码正在设置并删除active类。问题是，只要您点击链接，就会离开页面。

如果你的目标是＆＃34;记住＆＃34;当您返回到需要将其存储在持久介质中的页面时，最后一次单击的链接是什么。 localStorage使用起来很简单，可以解决问题。

但是，您在click元素上设置了li个事件，而li个元素包含a元素，这是多余的。相反，只需在click元素上设置a。

＆＃13;

$(function(){
  // When the document is ready, get the last active link (if any)
  var lastActive = localStorage.getItem("lastClicked");
  
  // Set that element as the active element
  $("a[href='" + lastActive + "']").addClass("active");
  
  $('.nav').on('click', 'a', function(e){
    $('.nav li.active').removeClass('active');
    $(this).addClass('active'); 
    
    // Set the clicked link's href value into localStorage
    localStorage.setItem("lastClicked", this.getAttribute("href"));
  });
});

＆＃13;

.active { background:#ff0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown active">
            <a href="index.php">Home</a>
        </li>
        <li class="dropdown">
            <a href="aboutus.php">About</a>
        </li>
        <li class="dropdown">
            <a href="services.php">Services</a>
        </li>
        <li class="dropdown">
            <a href="contact.php">Contact</a>
        </li>
    </ul>
</div>

＆＃13;

请注意，由于安全限制，此代码无法在Stack Overflow代码段环境中使用，但它可以在您的环境中使用。

活跃课程不起作用

2 个答案: