我正在使用 bootstrap 并尝试在选项卡 1 中创建一个“激活”(切换到)选项卡 2 的按钮。
这是我的代码:
HTML 导航选项卡:
<ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
<li><a href="#page1" data-toggle="tab">Page One</a></li>
<li><a href="#page2" data-toggle="tab">Page Two</a></li>
</ul>
HTML 标签内容:
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" onclick="showPageTwo();">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
}
});
function showPageTwo() {
$('#pageSwitcher li:eq(1) a').tab('show');
}
</script>
有人愿意提供一些关于我到底哪里出了问题的见解吗?我几乎一模一样地复制了几个示例...单击选项卡本身效果很好,我只是似乎无法在第 1 页的底部创建一个激活第 2 页的按钮。
最佳答案
一:错误的形式,内联 onclick 调用...你不需要它,摆脱它:
<button type="button">Proceed to page 2</button>
二:你有两个 JS 错误。您没有关闭 .click() 函数,并且您正在尝试使用 li:eq(0) 说明符触发第一个选项卡...
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// ALSO, you were missing a closing paren, here!
});
//two issues ... onclick inside your button is trying to access
// your function before it's available... inline js like that, bad idea anyhow
// so hook into it inside your DOM ready code here anyhow.
var showPageTwo = function() {
// secondly, you're looking at the wrong item!
// li:eq(0) means "look at the first li in the array of li"
$('#pageSwitcher li:eq(1) a').tab('show');
};
$(".tab-content").on("click","#page1 button", showPageTwo);
});
请参阅此 jsFiddle 以获取工作示例:http://jsfiddle.net/mori57/Xr9eT/
关于javascript - 为什么这个 JavaScript 函数不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16694623/