Bootstrap 选项卡

在各种项目中难免会遇到选项卡的时候，bootstrap中有一个选项卡插件，傻瓜式，没什么难度，但是支持的效果还还是不错的，建议研究一下bootstrap.js的 关于选项卡的代码。

<!--添加 nav 和 nav-tabs 类到 ul 中-->
<ul id="myTab" class="nav nav-pills">
	<!--//通过 data 属性：你可以通过添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。-->
	<li class="active"><a href="#one" data-toggle="tab">选项卡一</a></li>
	<li><a href="#two" data-toggle="tab">选项卡二</a></li>
	<li class="dropdown">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">选项卡三
         <b class="caret"></b>
    </a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			<li><a href="#three"  data-toggle="tab">son_1</a></li>
			<li><a href="#four"  data-toggle="tab">son_2</a></li>
		</ul>
	</li>
</ul>
<div class="tab-content">
	<!--//如果需要为选项卡设置淡入淡出效果, 需要添加 .fade 到每个 .tab-pane后面。第一个选项卡必须添加 .in 类-->
	<div class="tab-pane fade in active" id="one">
		<p>1111111</p> 
	</div>
	<!--//注意这些id 是和前面的 href是相对的，这样才能匹配-->
	<div class="tab-pane fade" id="two">
		<p>2222222</p>
	</div>
	<div class="tab-pane fade" id="three">
		<p>333333</p>
	</div>
	<div class="tab-pane fade" id="four">
		<p>44444</p>
	</div>
</div>