jQuery UI 选项卡转到选项卡中的特定 div

Question

我使用 JqueryUI 设置了基本的选项卡(简化为只有两个相关的选项卡)

 <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Home</a></li>
            <li><a href="#tabs-5">Benefits</a></li>

        </ul>
        <div id="tabs-1">
            <UCHome:UCHome runat="server" />
        </div>
        <div id="tabs-5">
            <UCBenefits:UCBenefits runat="server" />
        </div>
</div>

在tabs-1的usercontrol中(简化为相关代码)

<a class="benefitc" href="#benefitsmodularity">
     <span>Modularity</span>
     <asp:Image runat="server" ImageUrl="../Images/Benefits1.png"/></a> 
<a class="benefitc" href="#benefitsflexibility>
    <span>Flexibility</span><asp:Image runat="server" ImageUrl="../Images/Benefits2.png" /></a>

在 tabs-5 的用户控件中(再次简化)

<div class="homecontent">
    <div id="benefitsmodularity">
        <h2>
            (Modularity)</h2>
        <p>
            Hello
        </p>
    </div>
</div>
<div class="homecontent">
    <div id="benefitsflexibility">
        <h2>
            (Flexibility)</h2>
        <p>
             World
        </p>
    </div>
</div>

homecontent 类仅用于样式。

现在基本上，当用户单击 tabs-1 上的图像并且我希望它转到与图像相关的 div 时，我想从 tabs-1 重定向到 tabs-5。例如，如果用户单击 Benefits2.png，那么我希望它转到 tabs-5 并关注 .

到目前为止我已经在document.ready中

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

$('.benefitc').click(function () { // bind click event to link
   $tabs.tabs('select', 4); // switch to tab
   return false;
});

这让我正确地进入选项卡，但我不知道如何进入正确的 div。请注意，所有点击都应将我带到索引 4 的 tabs-5。

任何帮助将不胜感激。如果我对这个问题不够清楚，请告诉我。

Answer 1

active 选项也可用于设置事件选项卡(注意 - 当分配了一个 bool 值且 collapsible 为 true 时，事件选项卡可以不同地使用):http://api.jqueryui.com/tabs/#option-active
[下面的文字来自上面的链接，修改后的格式]

active - 当前打开的面板。 类型: bool 值或整数。 默认: 0

代码示例:
使用指定的事件选项初始化选项卡:

        $( ".selector" ).tabs({ active: 1 });

获取或设置事件选项，初始化后:

        // getter
        var active = $( ".selector" ).tabs( "option", "active" );<br>
        // setter
        $( ".selector" ).tabs( "option", "active", 1 );