CODEWITHSUNDEEP
jqueryhtmlcss
Oam Psy
Oam Psy

Reputation: 8663

Highlight UL LI Active Menu Item

I have a simple horizontal menu. What i am trying to achieve is:

1) On load, the Home menu item has a background colour 2) When a menu item is selected, its background colour is highlighted

HTML:

<ul class="tabs">
    <li>
        <div class="home">Home</div>
    </li>
    <li>
        <div class="contact">How to Contact Us</div>
    </li>
    <li>
        <div class="products">About Our Products</div>
    </li>
</ul>

<div class="home-section">
    Welcome to Home
</div>

<div class="contact-section hide">
    Welcome to Contact Us
</div>

<div class="products-section hide">
    Welcome to Products
</div>

CSS:

.tabs ul {
    list-style: none;
}

.tabs li {  
    display: inline-block;
    width: 25%;
    height: 50px;   
    text-align: center;
    color: #B84DFF;
    cursor: pointer;
    border-style:solid;
    border-width:1px;
}

.hide {
    display: none;
}

jQuery:

$('.home').on('click', function () {
    $(".home-section").show();
    $(".contact-section").hide();
    $(".products-section").hide();
});

$('.contact').on('click', function () {
    $(".home-section").hide();
    $(".contact-section").show();
    $(".products-section").hide();
});

$('.products').on('click', function () {
    $(".home-section").hide();
    $(".contact-section").hide();
    $(".products-section").show();
});

My fiddle: http://jsfiddle.net/oampz/dWbx5/10/

Upvotes: 2

Views: 10291

Answers (2)

Felix
Felix

Reputation: 38102

You can add a class active to your CSS:

.tabs li.active {
    background-color: #444;
}

then you can add and remove this class from the menu like this:

$('ul.tabs li').click(function() {
    $('ul.tabs li').removeClass('active');
    $(this).addClass('active');
});

Actually, I'd suggest you to shorten your code using data-* attribute:

<ul class="tabs">
    <li data-section="home-section" class="active">
        <div class="home">Home</div>
    </li>
    <li data-section="contact-section">
        <div class="contact">How to Contact Us</div>
    </li>
    <li data-section="products-section">
        <div class="products">About Our Products</div>
    </li>
</ul>

then jQuery:

$('ul.tabs li').click(function() {
    $(this).addClass("active").siblings().removeClass("active");
    var section = $(this).attr('data-section');
    $('div.'+section).show().siblings('div').hide();
});

Fiddle Demo

Upvotes: 4

Liftoff
Liftoff

Reputation: 25372

You could just use the click event and assign a class to the element that is clicked:

jQuery:

$("ul.tabs li").click(function(){

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

});

CSS:

.tabs li.active
{
    background: #b84dff;
    color: white;
}

JSFiddle

Edit:

As @techfoobar pointed out, you could save a line of code and change the jQuery to:

$("ul.tabs li").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});

Edit 2:

To make the content change more concise, you could do something more like this:

$("ul.tabs li").click(function(){

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

    $("div.tab").hide();
    $("div."+$(this).find("div").attr("id")+"-section").show();

});

I added a class .tab to each of the content divs to make it easier to select them. I then hide all of the divs and show the one with the className that matches .[child div ID]-section. And that's all the code you need.

Note that I changed all of the <div>'s class="home", etc to id="home".

JSFiddle

Upvotes: 10

Related Questions