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>

    标签页的内容代码如下：

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

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

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

原文：http://blog.csdn.net/bruce128/article/details/43059199