按钮单击Bootstrap,如何切换导航类?

时间:2015-03-26 03:33:20

标签: javascript jquery html css twitter-bootstrap

我正在尝试在我的一个页面上设置一个向导式主题来构建一个配置文件,我希望能够通过点击下一步切换bootstrap的类导航,虽然我不完全确定如何这样做。标签布局的nav是这样的:

<!-- Nav tabs -->
<ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#aaa" aria-controls="aaa" role="tab" data-toggle="tab">aaa</a></li>
    <li role="presentation"><a href="#bbb" aria-controls="bbb" role="tab" data-toggle="tab">bbb</a></li>
    <li role="presentation"><a href="#ccc" aria-controls="ccc" role="tab" data-toggle="tab">ccc</a></li>
    <li role="presentation"><a href="#ddd" aria-controls="ddd" role="tab" data-toggle="tab">ddd</a></li>
</ul>

我的按钮看起来像这样,但是它们可以工作,但是他们不会在相应的"active"上切换nav-pills课程:

<a href="#bbb" aria-controls="bbb" role="tab" data-toggle="tab" class="btn btn-success btn-lg bottomright">Next</a>

我是否可以定位nav-pills来切换活动类?

1 个答案:

答案 0 :(得分:0)

$('.nav-tabs > .active').next('li').find('a').trigger('click');

点击下一步按钮时,此JQuery代码可帮助您将列表中的下一项设置为活动状态。 另外我认为您应该从“下一步”按钮中删除href="#bbb"