切换页面上的所有jQuery标签

Question

我正在使用jQuery中的标签来显示不同语言（C＃和Javascript）的代码段。 当用户单击选项卡之一时，我希望所有选项卡都切换到相应的语言。 例如，如果用户单击Javascript选项卡，则所有其他代码段将切换到Javascript选项卡。

这是我正在做的jsfiddle 链接 。 这是我的代码如下：

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();
});

我以为通过使选项卡具有相同的链接，它们将在每次单击时切换，但是似乎不起作用。 有关如何执行此操作的任何建议？

Answer 1

我认为这就是您所需要的。

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

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

当您在一个选项卡组中选择一个选项卡时，所有选项卡组都会选择该选项卡。

编辑了URL以转到工作的jsfiddle站点。