javascript - 不同位置的 jQuery UI 选项卡和选项卡内容

Question

UI 选项卡的工作方式如下：

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

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
    </ul>
    <div id="tabs-1">
    </div>
    <div id="tabs-2">
    </div>
</div>

需要做这样的事情：

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

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
    </ul>
</div>

<div id="tabs-content">
    <div id="tabs-1">
    </div>
    <div id="tabs-2">
    </div>
</div>

所以标签和标签内容在不同的 div 中。

是否可以？

Answer 1

是的，这是可能的

请检查此链接，然后单击链接

http://jsfiddle.net/YJdVE/1/

代码

$(function() {
$("#tabs ul li").click(function() {
$("#tabs-content div").hide();
$('#tabs-content div:eq('+($(this).index())+')').show();
});
});