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