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