CODEWITHSUNDEEP
jquery
amardeep
amardeep

Reputation: 13

Have jQuery listen for a click on one of a set of tabs?

I have a feeling something like this has been asked before, but I gave it a few searches and couldn't find anything applicable to my situation.

I'm trying to figure out the most optimal way to replicate tab browsing with CSS/HTML/jQuery. So, for example, if you have 3 open tabs in Safari with tab1 as the active tab, clicking tab2 or tab3 will run a command to hide the previously active tab (tab1) and make the clicked tab's (tab2) content active.

I'm struggling to figure out how to consolidate the most straightforward jQuery solution I've come up with, which doesn't scale well and is definitely not the best way to be doing this.

Here's a stripped down version of the code I have that works fine for two tabs, but will definitely be a pain for more than 2 tabs. The .safaritabs class is the class for the actual tab bar, where #tabcontent-1 and #tabcontent-2 are the IDs for the content inside the safari window:

<div class="safaritabs">
  <div class="tab-1 activetab">
    Tab 1
  </div>
  <div class="tab-2">
    Tab 2
  </div>
  <div class="tab-3">
    Tab 3
  </div>
</div>

<div class="tabcontent" id="tabcontent-1">
  <!--Tab content-->
</div>
<div class="tabcontent" id="tabcontent-2">
  <!--Tab content-->
</div>

And the jQuery:

$(".tab-2").click(function(){
  $("#tabcontent-1").hide();
  $(".tab-1").removeClass("activetab");
  $(".tab-2").addClass("activetab");
  $("#tabcontent-2").show();
});

I know there must be a way to automate this efficiently so that I'm not writing code for (.tab-1).click, (.tab-2).click, (.tab-3).click, etc., but I don't quite have the jQuery know-how to realize what to look into. Would a for-loop of sorts be able to handle this task properly and listen for clicks on all tabs, or is there another route I should look into?

Any help is greatly appreciated.

Upvotes: 1

Views: 879

Answers (2)

John S
John S

Reputation: 21482

Give all the tabs the same class and use a data-* attribute to associate the content divs with the tabs:

<div class="safaritabs">
  <div class="tab activetab" data-content="#tabcontent-1">
    Tab 1
  </div>
  <div class="tab" data-content="#tabcontent-2">
    Tab 2
  </div>
  <div class="tab" data-content="#tabcontent-3">
    Tab 3
  </div>
</div>

Then register the click-event handler on all of the tabs, but use this inside the callback to refer to the tab that was clicked.

$('.tab').click(function(){
    var $tab = $(this);
    $('.tab').removeClass('activetab');
    $tab.addClass('activetab');
    $('.tabcontent').hide();
    $($tab.attr('data-content')).show();
});

jsfiddle

Notice that to add another tab, you just have to add to the HTML --- you do not have to change the JavaScript code.

You could also use event delegation to register the click-event handler. In this case, the event handler is actually placed on the div that surrounds tabs, but is still called only when a tab is clicked, and this still refers to the clicked tab. This is just a little more efficient since only a single event handler is registered, rather than one for each tab.

$('.safaritabs').on('click', '.tab', function(){
    var $tab = $(this);
    $('.tab').removeClass('activetab');
    $tab.addClass('activetab');
    $('.tabcontent').hide();
    $($tab.attr('data-content')).show();
});

jsfiddle

Upvotes: 0

user1214083
user1214083

Reputation: 122

I think you should use bootstrap tabs

Upvotes: 0

Related Questions