logo标签列表

jQuery UI选项卡如何跳转到特定div

jqueryjquery-uihtmltabsclick
5

我使用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>

在标签页的用户控件中（仅保留相关代码）：
<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>

在用户控件中的选项卡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上的图像时将其重定向到tabs-5，并且我希望它转到与图像相关的div。例如，如果用户单击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。请注意，所有的点击都应该带我到tabs-5，也就是索引4。

非常感谢您的帮助。如果我的问题不够清楚，请告诉我。

jsFiddle？- 没有什么特别惊人的东西在那里突出。 - Mitch Malone
@Mitch - 我会尝试把它弄好。但是要明确一点，选项卡功能可以百分之百正常工作。它确实在单击时转到正确的选项卡。我遇到问题的是需要在选项卡上找到正确的div。 - Kamal
3个回答
6
active - 当前打开的面板。 类型：布尔值或整数。 默认值：0

代码示例：
使用指定的活动选项初始化选项卡： 
        $( ".selector" ).tabs({ active: 1 });
在初始化后获取或设置活动选项： 

        // 获取器
        var active = $( ".selector" ).tabs( "option", "active" );<br>
        // 设置器
        $( ".selector" ).tabs( "option", "active", 1 );

注意-当指定为布尔值且可折叠时，活动选项卡可以以不同方式使用。详情请参阅http://api.jqueryui.com/tabs/#option-active。
5

当代码猴子做了一些愚蠢的事情时，他说：“啊啊啊啊啊啊啊！”

这是我犯的一个小错误。

锚标签确实有效，但由于我在使用 

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

return false会停止事件传播，导致a标签的默认行为无法触发。

因此，将其更改为

return true;

达到了预期的结果。

1
这里有一个激活特定选项卡的工作示例。
<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接