Сохранять элемент навигации при нажатии

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

HTML:

<div class="admin-main-area"> 
    <div class="admin-left-nav"> 
     <ul id="admin-left-links"> 
     <li><a class="link" href="#">Orders</a></li> 
     <li><a class="link" href="#">Reports</a></li> 
     <li><a class="link" href="#">Add Product</a></li> 
     <li><a class="link" href="#">Update Products</a></li> 
     <li><a class="link" href="#">Update Stock</a></li> 
     <li><a class="link" href="#">Update Pricing</a></li> 
     </ul> 
    </div> 
    <div class="admin-content-area"> 
     <p>this is some content</p> 
    </div> 
</div>

Javascript:

<script> 
$('a.link').click(function(){ 
    $('a.link').removeClass("active"); 
    $(this).addClass("active"); 
}); 
</script>

CSS:

.active { 
    background-color: #f43333; 
}

источник

2017-01-14 basil3

Я не вижу ничего плохого с ним .. работает для меня – putvande

Это работает хорошо для меня в JSFiddle - JQuery 3.1.1. - https://jsfiddle.net/JokerDan/u51og4w3/ – JokerDan

все, что вам нужно, для jQuery [https://jsfiddle.net/cttagtnx/1/] –

В то время, когда вы настраиваете обработчики событий кликов, ссылки еще не загружены в DOM.

Попробуйте это (будет настройка обработчики, когда DOM загружен):

$(window).ready(function() { 
    $('a.link').click(function() { 
    $('a.link').removeClass("active"); 
    $(this).addClass("active"); 
    }); 

})

Конечно, вам также необходимо включить JQuery перед <script> фрагмент

Вот рабочая скрипку: https://jsfiddle.net/nsjfe5g1/

источник

2017-01-14 11:26:03

Я не понимаю, что вам нужно, но для моего понимания вы можете просто сделать это с помощью css:focus селектор

a:focus { 
    background-color: #f43333; 
}

Попробовать демо https://jsfiddle.net/nsjfe5g1/2/

источник

2017-01-14 11:32:29

НО, таким образом, активный элемент не будет активен или сфокусирован после того, как пользователь нажмет на другой элемент документа! –

Сохранять элемент навигации при нажатии

ответ

Смежные вопросы