Thread: Active tab bold

Assuming the following is your tab structure:

HTML Code:

<ul>
    <li id="tab1" class="tab"></li>
    <li id="tab2" class="tab"></li>
    <li id="tab3" class="tab"></li>
    <li id="tab4" class="tab"></li>
</ul>

When one is clicked, javascript adds a class of 'active' to that li, like so:

HTML Code:

<ul>
    <li id="tab1" class="active tab"></li> <!-- this is the active tab now -->
    <li id="tab2" class="tab"></li>
    <li id="tab3" class="tab"></li>
    <li id="tab4" class="tab"></li>
</ul>

The tab with the two classes, 'active' and 'tab' will pick up the css from:

Code:

.active.tab {
font-weight: bold
}

You'll notice that '.active.tab' has no space so it isn't matching a child '.tab' with a parent '.active', just an element that has those two classes.

The javascript also needs to remove the class active from the current tab when another tab is clicked, thereby making the new tab the sole active tab.

The javascript, or jQuery in this case, would be something like:

Code:

$('.tab').live('click', function() {
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
});

A live example: http://jsfiddle.net/frinkky/jL2fG/

Hey Frinkky, Thanks for this!

[FONT=FontinSansRegular]When one is clicked, javascript adds a class of 'active' to that li, like so:[/FONT]

That is the bit I did not understand, a foreign language to me; entendeu cara?

[FONT=FontinSansRegular]You'll notice that '.active.tab' has no space so it isn't matching a child '.tab' with a parent '.active', just an element that has those two classes.[/FONT]

Learnt something here

I could not get the code to work, so I looked at the source of the live example you provided, it showed the js like this which worked!?

Code:

<script type="text/javascript">
$(window).load(function(){ // this line seemed to get it to work
$('.tab').live('click', function() {
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
});
});  
</script>

Yep, it's often necessary to dictate when the snippet is to be ready and that is done with $(window).load or $(document).ready.

The difference between the two is that $(document).ready fires when the html is loaded and the DOM is ready, but things like images may not be loaded yet. This is where $(window).load comes in, this only triggers when everything is loaded and ready.

In your case, the live 'click' event is probably best activated on $(document).ready so if people start clicking away before images are fully loaded it'll still work.

I am now trying to get 'tab1' to be active when the page opens, I tried fiddling with your code but do not know js well enough.

I found this, which works not sure where to put it, can it go on a line of it's own?

Code:

$("li:#tab1").addClass("active")