CODEWITHSUNDEEP
jquery
fabiokz
fabiokz

Reputation: 31

Jquery add and remove class on a menu

I'm newbie in jquery, I have this html code menu:

<nav>
    <ul class="navtab">
        <li class='home selected'><a href='index.php'>Home</a></li>
        <li class='about'><a href='company.php'>About</a></li>
    </ul>
</nav>

this is jquery code:

$(".navtab li.about").click(function(){
    $('.navtab li.home').removeClass('selected');
    $('.navtab li.about').addClass('selected');
});

and this my css:

nav ul.navtab li.selected a{
    color: #fff;
    background-color: #575757;
}

When the page load tab home is selected. When I click on about tab I want to remove class selected on tab home and add class selected on tab about. Where is the problem??

Thanks in advance. Fabio

Upvotes: 1

Views: 2463

Answers (4)

timpng1
timpng1

Reputation: 148

You can use a 'data-type=""' attribute or just use a name attribute to manage the on-states of this menu:

<nav>
<ul class="navtab">
<li class='home selected' id="homepage" name="nav_item"><a href='#'>Home</a></li>
<li class='about' id="company" name="nav_item"><a href='#'>About</a></li>
</ul>
</nav>​

And then here is the jQuery:

$("[name='nav_item']").click(function(){
$("[name='nav_item']").removeClass('selected');
$(this).addClass('selected');
});​

The jQuery removes all instances of the 'selected' class when a nav-item is clicked, then adds the 'selected' class to the link that was clicked. Let me know if this will work for you...I've made a jsFiddle of it here.

You can then use the ids for other things if you'd like. This just seems like a more efficient/cleaner way of doing it.

This will work as long as you're not refreshing the page...otherwise use your back-end code (PHP, JSP etc) to manage the on-states.

PHP example: 

<?php
if (isset($_GET['page']) && $_GET['page'] == 'homepage'){
    $selected_link = 'class="selected"'; //set the class if page is homepage
} else $selected_link = ''; //empty, will not throw and error
?>

Then your link:

<li class='home' id="homepage" <?php echo $selected_link;?>>

Upvotes: 0

Adil
Adil

Reputation: 148110

use removeClass('home.selected') instead of removeClass('selected'); also $('.navtab li.home') would be $('.navtab li.home.selected')

Live Demo

$("nav li.about").click(function(){  
     $('nav li.home.selected').removeClass('home selected');     
     $('nav li.about').addClass('selected');
});

Upvotes: 3

iambriansreed
iambriansreed

Reputation: 22241

If you were loading pages on the client side do this instead:

$(function(){

    $(".navtab>li").click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
    });

});

This works when any list item is clicked.

If you are loading new pages on the server side then you need to set the selected class server side.

Upvotes: 1

moonwave99
moonwave99

Reputation: 22817

If you want to highlight selected section, you have to do it server side.

If you mess with classes client side when you click a link, page will be reloaded and jQuery callback will have no effect then.

Upvotes: 0

Related Questions