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的usercontrol中(再次简化)

<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.请注意,所有点击都应该将我带到标签-5,即索引4.

任何帮助将非常感激.如果我对这个问题不够清楚,请告诉我.

Answer 1

Aaaaaaaaaargh说代码猴子做了一些愚蠢的事.

这对我来说很愚蠢.

锚标签确实可以工作但是因为我正在使用

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

返回false是停止事件传播,并且a标签的默认操作永远不会被触发.

所以改变它

return true;

达到了预期的效果.

Answer 2

所述活性选项也可用于设置活动标签（注意-活动标签可被不同地使用时，分配一个布尔值和可折叠为true）：http://api.jqueryui.com/tabs/#option-active
[文字下方[从上面的链接获取，修改后的格式]

有效 -当前打开了哪个面板。类型：布尔值或整数。默认值： 0

代码示例：
使用指定的活动选项初始化选项卡：

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

初始化后获取或设置活动选项：

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