无法获取嵌套的jquery标签 [英] Unable to get jquery tabs nested
本文介绍了无法获取嵌套的jquery标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是演示问题的完整示例脚本，公司/部门内部标签显示为列表而不是标签.
Here is the full sample script which demonstrates the problem, inner tabs company/department come up as list instead of tabs.
我已经尝试过人们提出的建议，也应该通过jQuery将内部标签制表，但是
I have already tried what People have suggested that inner tabs should also be tabified via jQuery but
- 它不起作用 我看到的所有例子，例如 http://cse-mjmcl.cse.bris.ac. uk/blog/jQueryNestedMenus/nested.html 使用最顶部的div进行jQuery选项卡调用.
- it doesn't work
- all the examples I have seen e.g. http://cse-mjmcl.cse.bris.ac.uk/blog/jQueryNestedMenus/nested.html use topmost div for jQuery tabs call.
代码:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function(){
//make tabs tabs
$('#top-tabs').tabs({selected: 2});
});
</script>
</head><body>
<div id="top-tabs">
<ul>
<li><a href="/timeapp/home">Home</a></li>
<li><a href="/timeapp/timecard">Timecard</a></li>
<li><a href="#tab-selected">Config</a></li>
</ul>
<div id="tab-selected">
<ul>
<li><a href="#inner-tab-selected">Company</a></li>
<li><a href="/timeapp/config/department">Department</a></li>
</ul>
<div id="inner-tab-selected">ok this is a company</div>
</div>
</div>
</body></html>
推荐答案
我在jquery论坛上发布了问题，并获得答案.
I posted the question at jquery forum and got the answer.
原因是elem.tabs()应该在所有内部选项卡上调用，我给出的示例是通过使用jQuery选择器来完成的，例如$('#container ul').tabs()，所以这是修改后的工作脚本:
Reason is that elem.tabs() should be called on all inner tabs, the example I gave does it by using jQuery selector e.g. $('#container ul').tabs(), so here is the modified working script:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function(){
//make tabs tabs
$('#top-tabs').tabs({selected: 2});
$('#low-tabs').tabs({selected: 1});
});
</script>
</head><body>
<div id="top-tabs">
<ul>
<li><a href="/timeapp/home">Home</a></li>
<li><a href="/timeapp/timecard">Timecard</a></li>
<li><a href="#tab-selected">Config</a></li>
</ul>
<div id="tab-selected">
<div id="low-tabs">
<ul>
<li><a href="#inner-tab-selected">Company</a></li>
<li><a href="/timeapp/config/department">Department</a></li>
</ul>
<div id="inner-tab-selected">ok this is a company</div>
</div>
</div>
</div>
</body></html>
这篇关于无法获取嵌套的jquery标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
