Bootstrap tab使用

晒图：

 

引用：

<link href="../../Resource/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="../../Resource/js/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../../Resource/js/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

脚本：

<script>
$(function () {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#divstyletab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
</script>

 html

<div style="margin: 10px; padding: 10px; width: 90%; height: 200px; border: 1px solid #dedede;">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#divstyle" data-toggle="tab">风格设置</a></li>
<li><a href="#divmystyle" data-toggle="tab">自定义风格</a></li>
<li><a href="#divbanshi" data-toggle="tab">版式设置</a></li>
<li><a href="#divcompent" data-toggle="tab">组件设置</a></li>
<li><a href="#divcompentmyself" data-toggle="tab">自定义组件</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="divstyle"> <div class="tabbable tabs-left" style="margin: 3px;"> <ul class="nav nav-tabs" id="divstyletab"> <li class="active"><a href="#divntyle" data-toggle="tab">最近</a></li> <li><a href="#divpstyle" data-toggle="tab">人文</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="divntyle"> </div> <div class="tab-pane" id="divpstyle"> ppp</div> </div> </div>
</div>
<div class="tab-pane" id="divmystyle">
<div class="tabbable tabs-left" style="margin: 3px;">
<ul class="nav nav-tabs" id="divmystyletab">
<li class="active"><a href="#divcolortyle" data-toggle="tab">配色方案</a></li>
<li><a href="#divbigbac" data-toggle="tab">修改大背景</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="divcolortyle">
<ul id="skin">
<li id="Model0" title="灰色" class="selected">灰色</li>
<li id="Model1" title="紫色">紫色</li>
<li id="Model2" title="红色">红色</li>
<li id="Model3" title="天蓝色">天蓝色</li>
<li id="Model4" title="橙色">橙色</li>
<li id="Model5" title="淡绿色">淡绿色</li>
</ul>
</div>
<div class="tab-pane" id="divbigbac">
ppp</div>
</div>
</div>
</div>
<div class="tab-pane" id="divbanshi">
<ul id="skinside">
<li id="winform1" title="灰色" class="selected">3:1</li>
<li id="winform2" title="紫色">1:3</li>
</ul>
</div>
<div class="tab-pane" id="divcompent">
<div class="tabbable tabs-left" style="margin: 3px;">
<ul class="nav nav-tabs" id="divccstyle">
<li class="active"><a href="#divbasecc" data-toggle="tab">基础组件</a></li>
<li><a href="#divyulecc" data-toggle="tab">娱乐组件</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="divbasecc">
<div id="div_chk" style="width: 100%; height: 20px; padding-top: 10; background: white;">
显隐藏设置：
<input type="checkbox" runat="server" id="chk_1" name="ck" onclick="chk(this, 'm_1')" />温馨提示
<input type="checkbox" runat="server" id="chk_3" name="ck" onclick="chk(this, 'm_3')" />为什么
<input type="checkbox" runat="server" id="chk_4" name="ck" onclick="chk(this, 'm_4')" />名医推荐
<input type="checkbox" runat="server" id="chk_5" name="ck" onclick="chk(this, 'm_5')" />卫生信息
<input type="checkbox" runat="server" id="chk_2" name="ck" onclick="chk(this, 'm_2')" />新闻中心
</div>
</div>
<div class="tab-pane" id="divyulecc">
ppp</div>
</div>
</div>
</div>
<div class="tab-pane" id="divcompentmyself">
<input type="button" value="添加文本组件" id="btntext" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx" />
<input type="button" value="添加列表组件" id="btnlist"/>
<div id="chklist" runat="server">
 
</div>
</div>
</div>
</div>
  bootstrapt跟easyui一样，都是支持属性渲染的。tabs-left样式 是控制tab也的显示形态为左边，就是最近 ，人文的显示方式 ，大家可以试试 tabs-right的效果 ，举一反三 。active是 标识是否是 当前tab页的属性。$(this).tab('show');是tab页的显示方法。tab也是支持嵌套的 。希望对大家有帮助。 web开发