添加选项卡窗格后引导选项卡下拉列表不起作用
bootstrap tab dropdown not working after adding tab-pane
我在网页设计和引导方面很陌生。我正在尝试使用选项卡创建标题。并添加一个下拉菜单..代码看起来像这样。
<body>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Home</a></li>
<li class="dropdown">
<a href="#2" class="dropdown-toogle" data-toggle="dropdown">Tentang Kami<span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action3</a></li>
</ul>
</li>
<li><a href="#3" data-toggle="tab">Contact Us</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<iframe src="pages/home.html" width="1250" height="500" frameborder="0"></iframe>
</div>
<div class="tab-pane active" id="2">
<iframe src="pages/sejarah.html" width="1250" height="500" frameborder="0"></iframe>
</div>
<div class="tab-pane active" id="3">
<iframe src="pages/contactus.html" width="1250" height="500" frameborder="0"></iframe>
</div>
<div class="tab-pane active" id="4">
<iframe src="pages/visimisi.html" width="1250" height="500" frameborder="0"></iframe>
</div>
<div class="tab-pane active" id="5">
<iframe src="pages/progstudi.html" width="1250" height="500" frameborder="0"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".tab-pane.active").hide(); // Hide all tab conten divs by default
$(".tab-pane.active:first").show(); // Show the first div of tab content by default
});
</script>
</body>
因此,"Tentang Kami"选项卡应由下拉列表表示。但是当我尝试时,下拉菜单不会显示..但是当我尝试清空<div class="tab-content">
内的文本时,下拉列表有效。我错过了什么吗?对不起,我的英语不好
您的下拉列表不起作用,因为您href="#2"
id="2"
存在的位置。下拉插件在此处需要一个无效的目标。解决方案更改href="#2"
以href="#"
或将data-target="nonsense"
添加到切换锚点。
插件尝试通过以下方式查找父级的原因:
function getParent($this) {
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^'s]*$)/, '') //strip for ie7
}
var $parent = selector && $(selector)
return $parent && $parent.length ? $parent : $this.parent()
}
当您的定位点中没有数据目标(这是有意义的)时,将测试 href。当此属性退出时,它有一个长度,此元素的父元素将作为下拉列表的父级返回。
由于似乎不需要 href 链接上是否需要 href? 最好的解决方案是将非 href 致敬添加到具有data-toggle="dropdown"
的锚点中。
请注意,您仅使用数字定义 id,请参阅:HTML 中 id 属性的有效值是什么?
相关文章:
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何为下拉列表的每个选项添加一个属性
- jQuery下拉列表未显示第一个选项
- 使用选项组对下拉列表进行排序
- 从下拉列表中禁用其对应项的某些选定选项
- 使用Ajax或JavaScript选择下拉列表选项后,在同一页面上执行PHP脚本
- webforms:在javascript中动态添加下拉列表选项
- 在另一个下拉列表中的选择上切换下拉列表中选项的可见性
- 如果使用jquery在页面加载时未选择任何选项,如何禁用下拉列表
- 从下拉列表中选择其他选项时激活文本框
- 使用下拉列表过滤 ng 重复,而不复制下拉选项
- 如何在多选下拉列表中使选项成为必填/只读选项
- 从选择选项下拉列表中计算多个值
- 更改选择选项下拉列表与onclick功能按钮
- 选择其他字段元素时如何重置选择选项下拉列表
- j使用“选择选项”下拉列表查询多星评级系统
- 如何自动单击选项下拉列表
- 使用ui grid editableCellTemplate中的ng选项下拉列表[ng grid3.x]
- 层次结构和多选项下拉列表(HTML),并在项目之间导航(子节点)
- 从选择选项下拉列表中获取部分值