Bootstrap3标签页demo

项目组之前用Bootstrap3搭了一个管理平台，当时有一个很急的需求，需要用到标签页展示，对Bootstrap3不熟悉，就用jquery-ui写一个标签页。但是jquery-ui展示出来的标签页跟Bootstrap的整体框架十分不搭。正要这个需求有变化，就干脆用Bootstrap重写了这个标签页，中间遇到了些小麻烦。我前端技术很菜，就把这个功能当做一个demo记录下来吧。

首先导入必要的bootstrap和jquery资源。

    <script src="/js/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="/js/bootstrap.js" type="text/javascript"></script>
    <LINK href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

标签页头的示例代码如下：

<ul id="patchTab" class="nav nav-tabs">
	#foreach($client in $!clientList)
		<li class="">
			<a href="#$!{client.clientType}" data-toggle="tab">$!{client.clientType}</a>
		</li>
	#end
</ul>

ul标签的class需要 .nav .nav-tabs类。a标签的href的值十分的重要，它的值直接跟标签页下面的内容div的id关联。

标签页的内容代码如下：

<div id="patchTabContent" class="tab-content">
	#foreach($client in $!clientList)
        <div class="datatable tab-pane fade" id="$!{client.clientType}">
            <table >

            </table>
        </div>
	#end
</div>

内容div的class需要加入.tab-pane就可以了，.fade是淡入淡出的效果，.datatable是定义表格的样式。div的id一定要和上面的a标签的href值一样！但是a标签的href值是以 ‘#’ 号打头的。而这个div的id不能带有 ‘#’ 号。

再加上点击事件的js就OK了。

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