活動課程不起作用

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> 

請記住，由於安全性限制，此代碼在堆棧溢出代碼段環境中不起作用，但在您的環境中將起作用。