CODEWITHSUNDEEP
jquerycss
user1471980
user1471980

Reputation: 10626

manipulating tabs in jquery and css

I have these tabs:

<ul class="tab-nav">
    <li class="wui-first"><a class="wui-link" href="index.html">Home </a></li>
    <li class="tab-content"><a class="wui-link" href="#" rel="tabs1">Data1</a></li>
    <li class="tab-content"><a class="wui-link" href="#" rel="tabs2">Data2</a></li>
    <li  class="tab-content"><a class="wui-link" href="#" rel="tabs3">Data3</a></li
    <li class="tab-content"><a class="wui-link" href="#"rel="tabs4">Data4</a></li>
</ul>

css looks like this:

ul.tab-nav li a.selected {

    background-color: #E8E8E8;
    color: #980000   !important;
    font-weight: bold;
}

This is the html part:

<div id="main_area">
    <div class="tab-content" id="tabs1">
        <div id="div1" class="vol"></div>
        <div id="div2" class="vol"></div>
        <div id="div3" class="vol"></div>
        <div id="div4" class="vol"></div>
   </div>
</div>

I like to create a script that only applies css to the selected tab and show content belong to that tab in the html main_area. Can somebody help me wiht this. Right now, I select each tab, css stays the same for all. When I click between tabs, current click tab should have the .selected properties. Others should go back to being default.

Upvotes: 0

Views: 81

Answers (1)

kthornbloom
kthornbloom

Reputation: 3720

As far as applying css to the one you click on, assuming you're using jQuery try this:

$('.tab-nav li').click(function(){
    // remove selected class from any others
    $('.selected').removeClass('selected');
    // add selected class to the one you clicked
    $(this).addClass('selected');
});

To pull up the correct content, I'd probably do something like set the same rel attribute for the content div and it's corresponding tab. Then when you click on the tab, it could get the rel, and then find the next div with the same rel.

Upvotes: 1

Related Questions