jQuery UI选项卡转到选项卡中的特定目录
jQuery UI选项卡转到选项卡中的特定目录
提问于 2011-04-14 15:15:48
我使用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上的图像时，我希望从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。
任何帮助都将不胜感激。如果我在这个问题上还不够清楚，请告诉我。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-04-15 15:34:20
Aaaaaaaaaargh说当他做了傻事的时候代码猴子。
这是我犯的一个愚蠢的错误。
锚标记确实可以工作，但是因为我使用了
$('.benefitc').click(function () { // bind click event to link
$tabs.tabs('select', 4); // switch to tab
return false;
});返回false是停止事件传播和从未触发的a标记的默认操作。
因此将其更改为
return true;达到了预期的效果。
Stack Overflow用户
发布于 2013-11-10 13:21:06
这是一个激活特定选项卡的工作示例。
<!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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5659825
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号