Question

Possible Duplicate:
jquery highlight the link when clicked

I have this nav:

<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>

and this jquery code managing a plugin:

 $(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;
});

});

there are some Css for animation…but not important. The thing is: I want to make the nav link to be highlighted when I click on it, but then when i click on the other link I want this to be highlighted and the other one not. I tried adding

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

to the click function, but it would only highlight and not undo it when clicking the next link. Help please!!

Answer 1

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

Demonstration