「活動」類不添加到所有列表項目

我正在使用無序列表構建一個非常簡單的菜單。我希望當前頁面在被選中時突出顯示。「活動」類不添加到所有列表項目

我的問題是，其中一個菜單項獲得點擊時添加的active類，但其他都不是當我從菜單中更改頁面時，這就是爲什麼這對我來說很困惑。當我檢查時，控制檯中沒有錯誤。我甚至嘗試過從this SO post正則表達式的方法，但它仍然不適合我的所有菜單項。

HTML

<div class="page-menu"> 
    <ul> 
    <li class="list-item"><a href="#Item1">Item 1</a></li> 
    <li class="list-item"><a href="#Item2">Item 2</a></li> 
    <li class="list-item"><a href="#Item3">Item 3</a></li> 
    </ul> 
</div>

CSS

.active { 
    background-color:red; 
}

jQuery的

$(document).ready(function(){ 
    $('.page-menu a').each(function(index) { 
     if(this.href.trim() == window.location) 
      $(this).addClass("active"); 
    }); 
});

爲什麼active將被添加到一個列表項的任何想法，但不是別人？

來源

2014-10-08 Brian

因爲'href'爲他們的一個只匹配？而你的加入類'selected'，而不是'active' – tymeJV 2014-10-08 14:32:50

@tymeJV底部的類是一個錯字...現在更新了。我認爲'if'正在檢查當前的URL ......是不是正確的？ – Brian 2014-10-08 14:35:44

這是，但爲什麼你會期望添加超過1個活動類？ – tymeJV 2014-10-08 14:37:05

我認爲你的問題可能存在一些混淆。根據您的問題和意見，您需要選擇當前位置。因此，在任何給定時間應該只有一個位置選擇，因爲瀏覽器窗口在時間只能導航到一個位置。

此外，你驗證href屬性包含針對window.location.href它返回一個完整的URL（即http://www.example.com/something.html#Item1）哈希（#Item1）。在這種情況下，你的價值將永遠不會匹配。

而是試圖通過對像window.location.hash所以返回的值匹配：

$(function() { 
    $('.page-menu a[href="' + window.location.hash + '"]').addClass("active"); 
});

您可以通過使用jQuery attribute selectors確定一個位置完全消除環路。

// Test snippet to add hash to current URL. 
 
window.location.hash = "Item1"; 
 

 
$(function() { 
 
    $('.page-menu a[href="' + window.location.hash + '"]').addClass("active"); 
 
});

.active { 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="page-menu"> 
 
    <ul> 
 
    <li class="list-item"><a href="#Item1">Item 1</a></li> 
 
    <li class="list-item"><a href="#Item2">Item 2</a></li> 
 
    <li class="list-item"><a href="#Item3">Item 3</a></li> 
 
    </ul> 
 
</div>

JSFiddle

來源

2014-10-08 14:48:22 War10ck

「活動」類不添加到所有列表項目

回答

相關問題