Question

jsfiddle

I am trying to style my “current” navigation tabs. I also have a hover script in jQuery which is causing difficulties doing this:

<ul class="nav">
    <li class="nav1" id="current"><a href="#">Images</a></li>
    <li><span>.</span></li>
    <li class="nav2"><a href="#">Articles</a></li>
    <li><span>.</span></li>
    <li class="nav3"><a href="#">Links</a></li>
    <li><span>.</span></li>
    <li class="nav4"><a href="#">Contact</a></li>
</ul>

//This bit does not work as expected. -->
$(".nav li a").click(function(){

    $("li#current").removeAttr('id');
    $(this).parent().attr("id","current");

});

Basically I need to move the id from the first li anchor to whichever other li anchor is clicked, and have this newly placed id recognised by the hover script.

E.g. When you click “Articles”, “Images” disappears in blue, and “Articles” appears in blue and stays visible once the mouse is moved.

Anyone know how to do this?

Answer 1

Better way is to add extra class currenton selected item — class="nav1 current"

$(".nav li a").click(function(){
    $(this).parent().parent().find('li').removeClass('current');
    $(this).parent().addClass('current');
});

Should be like that … have to check it.

EDIT: Yes it works.