Постоянно выделять элемент javascript при нажатии

Возможный дубликат:
jquery выделяет ссылку при нажатии< /а>

У меня есть эта навигация:

<div id="nav">
    <ul>
        <li><a href="" data-filter="*">All</a></li>
        <li><a href="" data-filter=".cat1">Category 1</a></li>
        <li><a href="" data-filter=".cat2">Category 2</a></li>
        <li><a href="" data-filter=".cat3">Category 3</a></li>
    </ul>
</div>

и этот код jquery, управляющий плагином:

 $(document).ready(function(){
    var $container = $('#content_iso');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
    $('#nav a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });

  return false;
});

});

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

$(this).css('border', 'solid black');

к функции щелчка, но она будет выделять, а не отменять ее при нажатии на следующую ссылку. Помогите, пожалуйста!!


javascript jquery hyperlink highlight nav
person André Lucas    schedule 17.11.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward 

$('#nav a').click(function(){
   $('#nav a').css('border',''); // <== add this line : remove border on other links
   $(this).css('border', 'solid black');

Демонстрация

person Denys Séguret    schedule 17.11.2012

arrow_upward
3
arrow_downward

Вместо этого используйте класс css:

.active{border:1px solid black}

$('#nav a').click(function(){
    $('a.active','#nav').removeClass('active');
    $(this).addClass('active');
}
person A. Wolff    schedule 17.11.2012
comment
Согласитесь, CSS — лучшая практика для этого эффекта пользовательского интерфейса. JavaScript можно использовать для того же, но он требует значительно больше кода и менее интуитивен. - person kingdango; 17.11.2012

arrow_upward
1
arrow_downward

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

$('#nav a').click(function() {
   $('#nav a').removeClass('selected');
   $(this).addClass('selected');

.selected {
    border: 1px solid #000;
}
person Robin Drexler    schedule 17.11.2012