jQuery-选择带有链接的Bootstrap Nav选项卡

Question

I've setup the Bootstrap/jQuery nav-tabs. The tabs themselves work as expected, however I need to have buttons within the tab content that also activate the next tab.

The buttons I've added force the tab-content active, however the tab li are not being updated.

I have setup a JSFiddle to display the problem.

  <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#next-move-home" data-toggle="tab">HOME</a></li> <li role="presentation"><a href="#next-move-1-0" data-toggle="tab">1.0</a></li> <li role="presentation"><a href="#next-move-2-0" data-toggle="tab">2.0</a></li> <li role="presentation"><a href="#next-move-3-0" data-toggle="tab">3.0</a></li> <li role="presentation"><a href="#next-move-4-0" data-toggle="tab">4.0</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="next-move-home"> <h2>Home</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-1-0" data-toggle="tab">1.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-1-0"> <h2>1.0</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-2-0" data-toggle="tab">2.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-2-0"> <h2>2.0</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-3-0" data-toggle="tab">3.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-3-0"> <h2>3.0</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-4-0" data-toggle="tab">4.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-4-0"> <h2>4.0</h2> <p>Content</p> </div> </div> 

Answer 1

Something like this should do it:

 $(document).ready(function () { $(".tab-content a").click(function () { if (this.href.indexOf("next-move") >= 0) { $(".nav-tabs li.active").removeClass("active"); $(".nav-tabs li a[href=" + this.hash + "]").parent().addClass("active"); } }); }); 

 <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src=" http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#next-move-home" data-toggle="tab">HOME</a> </li> <li role="presentation"><a href="#next-move-1-0" data-toggle="tab">1.0</a> </li> <li role="presentation"><a href="#next-move-2-0" data-toggle="tab">2.0</a> </li> <li role="presentation"><a href="#next-move-3-0" data-toggle="tab">3.0</a> </li> <li role="presentation"><a href="#next-move-4-0" data-toggle="tab">4.0</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="next-move-home"> <h2>Home</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-1-0" data-toggle="tab">1.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-1-0"> <h2>1.0</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-2-0" data-toggle="tab">2.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-2-0"> <h2>2.0</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-3-0" data-toggle="tab">3.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-3-0"> <h2>3.0</h2> <p>Content</p> <a class="btn btn-default" href="#next-move-4-0" data-toggle="tab">4.0</a> </div> <div role="tabpanel" class="tab-pane fade" id="next-move-4-0"> <h2>4.0</h2> <p>Content</p> </div> </div>