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

【问题标题】：jQuery UI Tabs go to specific div in tabjQuery UI 选项卡转到选项卡中的特定 div
【发布时间】：2011-04-14 07:15:47
【问题描述】：

我使用 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的用户控件中（简化为相关代码）

<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。

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

【问题讨论】：

jsFiddle？ - 那里没有什么特别令人震惊的......
@Mitch - 会尝试把它弄到那里。但为了清楚起见，这些选项卡 100% 有效。它确实会在单击时转到正确的选项卡。我需要它转到我遇到问题的选项卡上的正确 div。

标签： jquery jquery-ui html tabs click

【解决方案1】：

Aaaaaaaaaargh 在做傻事时说代码猴子。

这对我来说很愚蠢。

锚标签确实有效，但因为我使用的是

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

返回 false 是停止事件传播和 a 标签的默认操作从未触发。

所以改成

return true;

达到了预期的结果。

【讨论】：

【解决方案2】：

active 选项也可用于设置活动选项卡（注意 - 活动选项卡在分配布尔值并且 collapsible 为 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 );

【讨论】：

【解决方案3】：

这是一个激活特定标签的工作示例。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">HOME</a></li>
<li><a href="#tabs-2">About Us</a></li>
<li><a href="#tabs-3">Contact</a></li>
</ul>
<div id="tabs-1">
<p>Home Page</p>
<button>Page 2</button>

<script>
    $( "button" ).click(function() {
    $( "#tabs" ).tabs( "option", "active", 1 );  <!-- Activate Tab Two -->
    alert(" It ran!");
    });
</script>

</div>
<div id="tabs-2">
<p>This is what we are all about.</p>
</div>
<div id="tabs-3">
<p>Name First Last</p>
<p>Town, City, Zip</p>
</div>
</div>
</body>
</html>

【讨论】：