活动课程不起作用

Question

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

以下是我尝试使用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类。 问题是，一旦单击链接，便会离开页面。

如果您的目标是“记住”返回页面时最后单击的链接，则需要将其存储在持久性介质中。 localStorage使用简单，可以解决问题。

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

 $(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")); }); }); 

 .active { background:#ff0; } 

 <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> 

请记住，由于安全性限制，此代码在堆栈溢出代码段环境中不起作用，但在您的环境中将起作用。