Not following the logic entirely but I think you are removing the tabs from the page when the weight changes and then adding some new ones. The 'click' event listener that you have established in the code you placed in your post will be destroyed the you remove the tabs from the page. You must reinstate them for the new tabs.

AussieJohn
—
2012-01-12T14:31:40Z —
#3

PhilipToop said:

The 'click' event listener that you have established in the code you placed in your post will be destroyed the you remove the tabs from the page.

We can fix this using event delegation. If the tab content is replaced, but not the entire tabs div (hope I'm making sense here) then event delegation could be applied to the tabs container element

I've taken the liberty to rewrite the code deepsingh wrote to show what we can do to optimize it.

We use .tabs-active here. It's a CSS class that's added using JavaScript which gives us a hook to work with in the CSS. This way the tabs will always show if there is no JavaScript available.

And finally, the JavaScript

$(document).ready(function() {
//a css hook so we know JS is available
$(".tabs").addClass("tabs-active")
//lets use event delegation so we only have to set up an event handler once.
$(".tabs").delegate(".tabs-nav a", "click", function(e) {
e.preventDefault(); //don't allow the default click on the link to occur
// 'this' is the currently clicked element
var $this = $(this),
$container = $this.closest(".tabs"); //handy reference
//hide all tabs in the current container
$container.find(".active").removeClass("active");
//set the current tab to active
$this.closest("li").addClass("active");
//show the currently selected tab
//we use the clicked link's href as it points to the tab we want to activate
$container.find( $this.attr("href") ).addClass("active");
});
//set the first tab and it's content box to active for each tab container
$(".tabs .tabs-nav li:first-child, .tabs .tab-panel:first-child").addClass("active");
});

Hopefully the comments explain well enough what the code does.

If you were to replace the contents of any give <div class="tab"></div> you won't have to set up the events again. (The only trouble is you will need to set the first tab and panel active again)

As you can see from this JavaScript, there is no need to reference the tabs using their IDs or classes individually through switch statements to figure out which one is clicked. Everything is based on there only ever being 1 tab active, therefore, rather than specifically setting other tabs as inactive, we hide all tabs and only show the one we want to make active. A small, subtle different, but an important one if we want to keep our code lean and performant.

This little snippet of code is quite extendible, the tabs IDs for example can simply be changed, so long as you change the links to match them.