无法获取嵌套的 jquery 选项卡
这是演示问题的完整示例脚本，内部选项卡公司/部门显示为列表而不是选项卡。
编辑： 我已经尝试过人们建议的内部选项卡也应该通过 jQuery 进行选项卡化，但
- 它不适用于
- 我见过的所有示例，例如 http://cse-mjmcl.cse.bris.ac.uk/blog/jQueryNestedMenus/nested.html 使用最上面的 div 进行 jQuery 选项卡调用。
代码：
<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>
Here is the full sample script which demonstrates the problem, inner tabs company/department come up as list instead of tabs.
Edit:
I have already tried what People have suggested that inner tabs should also be tabified via jQuery but
- 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.
Code:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果这是您的整个文件，那么问题是，您没有告诉它“选项卡选择”div 应该是选项卡。我还没有测试过，但添加一个 :
可能会成功。
If this is your entire File, then the problem is, your not telling it that the "tab-selected" div is supposed to be tabs. I haven't tested it but adding a :
would probably do the trick.
我在 jquery 论坛上发布了这个问题，得到了答案。
原因是应该在所有内部选项卡上调用
elem.tabs()，我给出的示例是通过使用 jQuery 选择器来实现的，例如$('#container ul').tabs()< /code>，这是修改后的工作脚本：I posted the question at jquery forum and got the answer.
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: