jQuery 按下按钮时如何更改 Twitter Bootstrap 选项卡?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9252127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:33:16  来源:igfitidea点击:

How to change Twitter Bootstrap tab, when button is pressed?

jqueryjquery-selectorstwitter-bootstrap

提问by LA_

I need to change the tab when button is pressed, and the tab should be identified by id. The following code doesn't work for me - just the page is reloaded:

我需要在按下按钮时更改选项卡,并且该选项卡应由 id 标识。以下代码对我不起作用 - 只是重新加载页面:

<div class="form-actions">
  <button class="btn btn-primary" id="btn-next">Next</button>
  <button type="reset" class="btn">Clear</button>
</div>
...
<div class="tab-pane active" id="2">
...

$("#btn-next").click(function(event) {
  $('#2').tab('show');
});

回答by balexandre

You can use something like this:

你可以使用这样的东西:

function nextTab(elem) {
  $(elem + ' li.active')
    .next()
    .find('a[data-toggle="tab"]')
    .click();
}
function prevTab(elem) {
  $(elem + ' li.active')
    .prev()
    .find('a[data-toggle="tab"]')
    .click();
}

and use nextTab('#tab');or prevTab('#tab');

并使用nextTab('#tab');prevTab('#tab');

Live examplewith continue actions: http://jsbin.com/atinel/9/edit#javascript,html

带有继续操作的现场示例http: //jsbin.com/atinel/9/edit#javascript,html

回答by Stephen Cox

What about using the data-toggle="tab"in an <a>tag? Something like:

data-toggle="tab"<a>标签中使用 怎么样?就像是:

  <a href="#2" class="btn btn-primary" id="btn-next" data-toggle="tab">Next</a>