无法获得嵌套的 jquery 选项卡

StackOverflow https://stackoverflow.com/questions/1432928

  •  07-07-2019
  •  | 
  •  

题

这是演示问题的完整示例脚本，内部选项卡公司/部门显示为列表而不是选项卡。

编辑：我已经尝试过人们建议的内部选项卡也应该通过 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>
有帮助吗？

解决方案 2

我在 jquery 论坛上发布了这个问题 得到了答案.

原因是 elem.tabs() 应该在所有内部选项卡上调用，我给出的示例是通过使用 jQuery 选择器来实现的，例如 $('#container ul').tabs(), ，所以这是修改后的工作脚本：

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

其他提示

如果这是您的整个文件，那么问题是，您没有告诉它“选项卡选择”div 应该是选项卡。我还没有测试过，但添加了一个：

 $('#tab-selected').tabs();

可能会成功。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top