Question

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

这是我正在做的jsfiddle link。以下是我的代码：

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网站。

切换页面上的所有jQuery选项卡

1 个答案: