Unbind the div and then bind it later.
$('.tab').click(function() {
$(this).unbind("click");
var classy = $(this).attr("class").split(" ").splice(-1);
var ihtml = $('.content.'+classy).html();
$('#holder').html(ihtml);
$('.tab').removeClass('highlight');
$(this).addClass('highlight');
$(this).unbind("click");
});
So, in this code, I have basically a tabbed interface. When I click the tabs again, the information in the #holder disappears. So what I would like to do is undo clicks when the user clicks on a tab and then links it when switching tabs. How can I integrate this into my code?
Thank.
source to share
You can try adding an 'active' class when clicking on a tab (usually a good practice) and then using jQuery live()
to do some fancy stuff ...
$('.tab:not(.active)').live('click', function () {
$('.tab').removeClass('active');
$(this).addClass('active');
...
});
I think this is the trick.
source to share
Alternatively, you can try using a syntax like this (which should be faster and more memory and PC friendly):
$('.tab').click(function(){
var t=$(this);
if(t.hasClass('active')){return false;}
$('.active').removeClass('active');
t.addClass('active');
/* do some stuff here */
return false;
});
Or even better, not to repeat yourself:
$('.tab').click(function(){
var t=$(this);
if(!t.hasClass('active')){
$('.active').removeClass('active');
t.addClass('active');
/* do some stuff here */
}
return false;
});
Why is it faster and cpu? Because you only link it once. When you use the binding method live
, the browser will listen for any changes to the DOM.
source to share