Навигация остается выделенным после нажатия на него

Question

Привет, я просто хотел помочь, пытаясь оживить мою навигационную панель. Я хочу, чтобы навигация по-прежнему была выделена после того, как я нажал на эту страницу. Так, например, если бы я нажал кнопку «домой», а на домашней странице кнопка дома была подсвечена, чтобы показать, что вы определенно находитесь на этой странице. Будет использовать: target или :: active?

<div id="header-content"> 
      <div class="hire"><h3>For Hire</h3></div> 
      <h1><a href="index.html">Black Cab Tours</a></h1> 

        <nav class="cl-effect-8"> 
        <ul> 
       <li><a onclick="tours.html" href="#tab1">Tours</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="contact.html">Contact</a></li> 
       <li><a href="#">Review</a></li> 
        </ul> 
       </nav> 

     </div> 

Answer 1

создать класс CSS, как

.active { 
background: #c2c2c2; 
} 

, когда и нажмите на ссылку На главную Добавить этот класс в этой Li тега через Java Script здесь код

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

или вы можете используйте селектор gt(), lt() для удаления активного класса с другого места li теги

Answer 2

Лучше всего использовать Javascript (например, JQuery), чтобы помочь вам в родной CSS :active только стиль текущее состояние взаимодействия, как это происходит, :target может быть ненадежным, если вы будете полагаться на маршрутизацию, и окончательный опция :focus не удастся щелкнуть в другом месте.

С помощью JQuery можно более плотно сохранить контроль над приложением/удалением выбранного состояния, например:

$('#header-content li').on('click', function(){ 
    $(this).addClass('selected').siblings().removeClass('selected'); 
}); 

Это изолирует соответствующие элементы, добавляет класс selected при нажатии кнопки один, и удаляет его от его братьев и сестер.