Is this proper use of jQuery?

Question

I have created a tabbed display with html/css. I simply want to use jQuery to toggle the tabs/classes. It works perfectly but I want to make sure I'm using jQuery properly.

Here's the html structure + jQuery:

<ul id="tabs">
<li><a href="#" id="tab1" class="activetab">Tab1</a></li>
<li><a href="#" id="tab2">Tab2</a></li>
</ul>

<div id="tabcontent">
<div id="tab1content">
This is tab 1 content
</div>
<div id="tab2content">
This is tab 2 content
</div>

 $("#tab1").click(function() {
           $("#tabcontent > div").hide();
           $("#tab1content").show();
           $("#tabs > li a").removeClass().addClass("inactivetab");
           $("#tab1").removeClass().addClass("activetab");
       });

The jQuery you see for tab1 is repeated for each tab.

Answer 1

You don't need to repeat the code for each tab. Instead, write one function that applies to all tabs (finding the parent and child nodes using jQuery selections) and bind that single function to the click handlers for tabs (you'll need a new class to identify which elements are tabs).

Answer 2

The jQuery looks ok, but you could generalize it to work with n number of tabs.

Also, adding a class for inactive tabs is probably redundant as if a tab does not have the active class, then it can be considered inactive.

Answer 3

The jQuery you see for tab1 is repeated for each tab.

I'd rather go with generic solution. Use "tab" class for all tabs, write a click handler for that. Use $(this) to reference what was clicked on.

Answer 4

You're on the right track I wouldn't recommend coding commands for each tab click. JQuery UI has a tab feature http://jqueryui.com/demos/tabs/ that could give you some ideas or for use too.

Answer 5

You ought to be able to write a single function, which can be called for each tab. Or, you can do something like this:

$("#tab1, #tab2").click(function() {
  var tab = $(this);
  var tabContent = $('#' + tab.attr('id') + 'content');
  // etc.
});

Answer 6

You should use a more generic approach in defining the behavior for the tabs:

$('#tabs a').click(function(){
    $("#tabcontent > div").hide();
    $("#"+$(this).attr('id')+"content").show();
    $("#tabs > li a").removeClass().addClass("inactivetab");
    $(this).removeClass().addClass("activetab");
});

With this code, it is possible to add other tabs without the need to add new JavaScript code. The information in the id attribute of the a tag is used to determine the content panel to display.

Answer 7

or you could just use the tabs function in jQuery UI:

$("#tabs").tabs();

Answer 8

Are you using jQuery UI tabs? If not, I'd highly recommend it, as the code looks very similar; instead of binding a click listener you each tab you can just bind a listener to the tabsselect event and add/remove classes in the listener's callback.

Answer 9

also might be useful to check out the toggle effect.