CODEWITHSUNDEEP
javascriptjqueryhtmltabs
user3746602
user3746602

Reputation: 435

Switch all jQuery tabs on a page

I'm working with tabs in jQuery to show code segments in different languages (C# and Javascript). When user clicks on one of the tabs, I want all the tabs to switch to the respective language. For example if the user clicks on the Javascript tab, all the other code segments will switch to the Javascript tab.

Here is the jsfiddle link to what I'm doing. Here is my code below:

HTML:

  < !-- Tab Set 1 -->
  <div class="tabs">
    <ul>
        <li><a href="#tabs-1">C#</a>
        </li>
        <li><a href="#tabs-2">Javascript</a>
        </li>
    </ul>
    <div id="tabs-1"> <pre class="prettyprint">Some C# code</pre>

    </div>
    <div id="tabs-2"> <pre class="prettyprint">Some Javascript Code</pre>

    </div>
  </div>

  < !-- Tab Set 2 -->
  <div class="tabs">
    <ul>
        <li><a href="#tabs-1">C#</a>
        </li>
        <li><a href="#tabs-2">Javascript</a>
        </li>
    </ul>
    <div id="tabs-1"> <pre class="prettyprint">Some C# code</pre>

    </div>
    <div id="tabs-2"> <pre class="prettyprint">Some Javascript Code</pre>

    </div>
  </div>

Javascript:

$(document).ready(function () {
    $("div.tabs").tabs();
});

I thought by making my tabs have the same link they would switch whenever one is clicked, but that doesn't seem to work. Any suggestions on how to do this?

Upvotes: 0

Views: 225

Answers (1)

hlozancic
hlozancic

Reputation: 1499

I think this is what you need.

$("div.tabs").tabs({
  activate: function( event, ui ) {
    var tabIndex = $(this).tabs('option', 'active');
    $("div.tabs").tabs({active:tabIndex});
  }
});

http://jsfiddle.net/XBLAY/3/

When you select one tab in one tab group, all tab groups select that tab.

Edited the URL to go to the working jsfiddle site.

Upvotes: 2

Related Questions