«активный» класс, не добавляющий ко всем элементам списка

Question

Я строю очень простое меню с использованием неупорядоченного списка. Я бы хотел, чтобы текущая страница была выделена, когда она выбрана.

Моя проблема в том, что один из пунктов меню получает класс active, добавленный при его нажатии, но ни один из остальных не является тем, что я меняю страницу из меню, поэтому это меня так сбивает с толку. При проверке ошибок в консоли нет. Я даже пробовал метод regex от 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 будут добавлены к одному элементу списка, но не другие?

Answer 1

Я думаю, что может возникнуть какая-то путаница в вашем вопросе. Исходя из вашего вопроса и комментариев, вы хотите выбрать текущее местоположение. Поэтому должно быть только местоположение, выбранное в любой момент времени, когда окно браузера может перемещаться только по одному месту.

Кроме того, вы проверка атрибута href, который содержит хэш (#Item1) против window.location.href, который возвращает полный URL (т.е. http://www.example.com/something.html#Item1). В этом случае значение href никогда не будет соответствовать.

Вместо этого попробуйте соответствие со значением возвращенного 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