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.

+2


source to share


2 answers


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.

+5


source


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.

0


source







All Articles