如何用javascript激活bootstrap的tab

进入正题前推荐cdnjs.com
类似Google CDN或者微软CDN服务，但是http://cdnjs.com/比他们上面提供的多很多，里面可以找到需要的大部分js。更好的是cdnjs上面不仅host，JavaScript还有CSS, SWF, images等等。

HTML代码，可以使用如下引用它们

1  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
2  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js">
3  </script>
4  <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js">
5  </script>
6 
7 
8  <ul class="nav nav-tabs" id="myTab">
9      <li class="disabled active"><a href="#no1">No.1</a></li>
10     <li class="disabled"><a href="#no2">No.2</a></li>
11     <li class="disabled"><a href="#no3">No.3</a></li>
12 </ul>
13  
14 <div class="tab-content">
15     <div class="tab-pane active" id="no1"><button class="btn-test btn" data-activate="#no2">Activate next tab</button></div>
16     <div class="tab-pane" id="no2"><button class="btn-test btn" data-activate="#no3">Activate next tab</button></div>
17     <div class="tab-pane" id="no3">
18         <button id = "finish" type="submit" name="finish_button" class="btn btn-primary">
19             <i class="icon-calendar icon-white"></i>
20             <span>Finish</span>
21         </button>
22       </div>
23
24 </div>
25

 

Javasctrip代码

 

1  function activateTab(selector) {
2      $(selector).on('click.twbstab',function() { $(this).tab('show'); })
3          .closest('.disabled').removeClass('disabled');
4  }
5 
6 
7  activateTab('#myTab a:first');
8 
9 
10 $(document).ready(function(){
11 $('.btn-test').on('click',function() {
12     var selector = '#myTab a[href="'+$(this).data('activate')+'"]';
13     activateTab(selector);
14   });
15 });
16
17
18 $(document).ready(function(){
19   $("#finish").click(function(){
20     alert(this.id);
21   });
22 });

现在到http://jsbin.com/上试试吧。