模擬Bootstrap標簽頁的實現

相信大家做前端都會去用Bootstrap，twitter的前端們做了件大好事，自發布以來，

這個框架發展十分迅速，很多人都會給Bootstrap來寫組件等，它帶來的直接好

處就是讓不太懂設計的人也能做出像樣的前端來，可是由于它要考慮很多兼容性

等問題，也會有一些麻煩的地方，比如標簽頁的實現：使用了a標簽。我猜想之所

以用這個的原因應該是想符合錨的思想吧，但是如此一來，問題也來了，如果頁面

其他地方也有a標簽，并且不是用來進行頁面跳轉的話，他們之間就會相互影響，

導致頁面內容畸形，所以決定自己重寫標簽頁的實現，也算是拋鉆引玉吧，有不足

之處還請各位大大指出。

1、設計tab標簽

HTML

<ul class="nav_tab" id="myTab">
    <li class="test1 actives">test1</li>
    <li class="test2">test2</li>
</ul>
<div class="clear"></div>

.nav_tab
{
	border-bottom: 1px solid #ddd;
	margin-left: 0;
	list-style: none;
	padding-bottom: 7px;
	margin-top: 16px;
}
.nav_tab > li
{
	margin-bottom:-1px;
	padding-right: 12px;
	padding-left: 12px;
	margin-right: 2px;
	padding-top: 8px;
	padding-bottom: 8px;
	line-height: 20px;
	border: 1px solid transparent;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	display: inline;
	color:#555;
	cursor:pointer;
}
.nav_tab>.actives, .nav_tab>.actives:hover, .nav_tab>.actives:focus {
	color: #029ADA;
	cursor: default;
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom-color: transparent;
}

.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

2、設計顯示內容

HTML

 <div class="tab_content">
	<div id="test1">
	test1
	</div>
	<div id="test2">
	test2
	</div>
</div>

3、設計事件響應

$("#myTab li").click(function (e) {
	$(this).siblings(".actives").removeClass("actives");
	var classes = $(this).attr("class");
	$(this).addClass("actives");
	$("#"+classes).siblings("div").fadeOut("fast");
	$("#"+classes).fadeIn("fast");
});

切換，而是想展示一種常用效果的實現思想，很多類似的效果都可以用這種ul+div

的組合去實現，比如側邊欄的菜單導航，類似IOS上的按鈕效果等等，如下圖所示。

最后想說的是不能迷戀框架，雖然說要盡量去避免重新發明輪子，但是這還是要跟

實際情況相結合的，用別人現成的輪子有時固然節省時間，但是如果別人的輪子不

好，或者你了解如何使用別人的輪子所花的時間特別漫長，此時千萬要記得自己還

可以去重新發明輪子。