Bootstrap每天必学之标签页（Tab）插件

<ul class="nav nav-tabs"> <li><a href="#identifier" data-toggle="tab">Home</a></li>...</ul>

$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')})

// 通过名称选取标签页$('#myTab a[href="#profile"]').tab('show') // 选取第一个标签页$('#myTab a:first').tab('show')  // 选取最后一个标签页$('#myTab a:last').tab('show')  // 选取第三个标签页（从 0 开始索引）$('#myTab li:eq(2) a').tab('show')

<div class="tab-content"> <div class="tab-pane fade in active" id="home">...</div> <div class="tab-pane fade" id="svn">...</div> <div class="tab-pane fade" id="ios">...</div> <div class="tab-pane fade" id="java">...</div></div>

<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li> .....</ul><div class="tab-content"> <div class="tab-pane active" id="home">...</div> .....</div><script> $(function () { $('#myTab a:last').tab('show') })</script>

//基本用法<ul class="nav nav-tabs"> <li class="active">  <a href="#html5"  data-toggle="tab">HTML5</a> </li> <li>  <a href="#bootstrap" data-toggle="tab">Bootstrap</a> </li> <li>  <a href="#jquery" data-toggle="tab">jQuery</a> </li> <li>  <a href="#extjs" data-toggle="tab">ExtJS</a> </li></ul><div class="tab-content" style="padding: 10px;"> <div class="tab-pane active" id="html5">  ... </div> <div class="tab-pane" id="bootstrap">  ... </div> <div class="tab-pane" id="jquery">  ... </div> <div class="tab-pane" id="extjs">  ... </div></div>

//可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示<div class="tab-pane fade in active" id="html5">//也可以换成胶囊式<ul class="nav nav-pills">//data-target

//使用 JavaScript，直接使用 tab 方法。$('#nav a').on('click', function(e) { e.preventDefault(); $(this).tab('show');}); 

//事件，其他雷同$('#nav a').on('show.bs.tab', function() { alert('调用 tab 时触发！');});$('#nav a').on('shown.bs.tab', function() { alert('显示完 tab 时触发！');});