九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

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

這個(gè)框架發(fā)展十分迅速，很多人都會(huì)給Bootstrap來寫組件等，它帶來的直接好

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

等問題，也會(huì)有一些麻煩的地方，比如標(biāo)簽頁(yè)的實(shí)現(xiàn)：使用了a標(biāo)簽。我猜想之所

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

其他地方也有a標(biāo)簽，并且不是用來進(jìn)行頁(yè)面跳轉(zhuǎn)的話，他們之間就會(huì)相互影響，

導(dǎo)致頁(yè)面內(nèi)容畸形，所以決定自己重寫標(biāo)簽頁(yè)的實(shí)現(xiàn)，也算是拋鉆引玉吧，有不足

之處還請(qǐng)各位大大指出。

1、設(shè)計(jì)tab標(biāo)簽

HTML

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

CSS

.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;}

上面的HTML代碼中最后一行是用來清除所有浮動(dòng)的，這里也給出一個(gè)萬能浮動(dòng)清除方法：

.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、設(shè)計(jì)顯示內(nèi)容

HTML

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

3、設(shè)計(jì)事件響應(yīng)

$("#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");});

到這里就基本完成了整個(gè)設(shè)計(jì)工作。其實(shí)在這里并不是單單想實(shí)現(xiàn)這么一個(gè)標(biāo)簽頁(yè)

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

的組合去實(shí)現(xiàn)，比如側(cè)邊欄的菜單導(dǎo)航，類似IOS上的按鈕效果等等，如下圖所示。

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

實(shí)際情況相結(jié)合的，用別人現(xiàn)成的輪子有時(shí)固然節(jié)省時(shí)間，但是如果別人的輪子不

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

可以去重新發(fā)明輪子。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。