純CSS實現(xiàn)Tab切換標簽效果代碼
發(fā)布時間：2015-09-23 10:19:24 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了純CSS實現(xiàn)Tab切換標簽效果代碼,通過css樣式設(shè)置實現(xiàn)tab標簽切換功能,非常簡單實用,需要的朋友可以參考下
本文實例講述了純CSS實現(xiàn)Tab切換標簽效果代碼。分享給大家供大家參考。具體如下：
這是一款純CSS實現(xiàn)的Tab簡潔版，很不錯的效果，希望大家喜歡。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab簡潔版</title>
<style type="text/css">
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
a{font:bold 14px/24px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_貳</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab簡潔版</title>
<style type="text/css">
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
a{font:bold 14px/24px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_貳</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>
希望本文所述對大家的css網(wǎng)頁設(shè)計有所幫助。
相關(guān)文章
Bootstrap+CSS3實現(xiàn)Tabs選項卡切換特效源碼
Bootstrap+CSS3實現(xiàn)Tabs選項卡切換特效源碼是一款通過簡單的CSS3代碼，將Bootstrap選項卡渲染出非常炫酷的效果。效果非常棒，有需要的朋友可以直接下載使用2016-06-23
jQuery和CSS3響應(yīng)式TAB選項卡切換幻燈片特效源碼
本代碼是一款使用jQuery和CSS3動畫制作的實現(xiàn)炫酷響應(yīng)式TAB選項卡樣式幻燈片特效源碼。切換時帶有非常炫酷的CSS3動畫效果2016-02-02
純CSS3實現(xiàn)的干凈清爽tab選項卡切換特效源碼
純CSS3實現(xiàn)的干凈清爽tab選項卡切換特效源碼，是一段非常常見的TAB選項卡切換代碼，此段代碼展示效果中的主要亮點就是界面干凈、清爽、簡單，需要此段代碼朋友們可以前來下2014-11-08純css實現(xiàn)的tab切換效果(使用錨點作為標記)
tab切換效果想必大家都有見到過吧，或許默認它一定是用js腳本實現(xiàn)的，其實不然，本例為大家介紹的這個就是用純css寫的tab切換效果2014-08-10
jQuery+css3實現(xiàn)的超酷無圖片圓角tab選項卡切換效果
依靠CSS3實現(xiàn)了Tab選項卡標簽的圓角效果，無需圖片2013-09-10
CSS3+jQuery實現(xiàn)切換過程中帶有動態(tài)滑動展示的選項卡Tab效果
選項卡在切換過程中帶有動態(tài)滑動效果，調(diào)用簡單，選項卡內(nèi)可以放圖片、文本或者圖文混排內(nèi)容2013-06-12
DOMTab-通過CSS和DOMscripting進行tab標簽欄切換效果
DOMTab是一個純JS實現(xiàn)的tab標簽欄切換效果，功能簡潔實用，可以通過點擊tab標簽欄切換，也可以通過JS代碼切換2012-10-12
用純CSS實現(xiàn)的多欄tab標簽自動切換效果的代碼
一個純CSS實現(xiàn)的tab切換效果，可以自定義多個標簽欄，鼠標滑過任意標簽欄時自動切換，并帶有變換效果。2012-08-10
基于JavaScript+CSS的迅雷熱播榜排行列表+tab內(nèi)容切換JavaScript特效
迅雷熱播榜右側(cè)的一個排行效果，基于JavaScript與CSS的共同結(jié)合來實現(xiàn)。2011-08-26
比較簡單的js tab切換效果代碼(通過設(shè)置css)
比較簡單的js tab切換效果代碼(通過設(shè)置css)2011-03-17
