網頁選項卡(很個性)_菜單導航特效

比較個性的網頁選項卡，一改方方正正的風格，換為這種菱形的樣式，看上往很生動，鼠標點擊后切換，而非滑動門，代碼段演示了在同一個網頁中調用兩個TAB選項卡，方便你的調用。

<!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" mrc="text/html; charset=gb2312" />
<title>選項卡</title>
<style type="text/css">
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;}
.display_none{display:none;}
/*選項卡的樣式*/
.convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url(http://p1.mb5u.com/texiao/switch_area.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的區域是table，那么padding-right:2px;*/
.convention_tab li{float:left;background:url(http://p1.mb5u.com/texiao/switch_area.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;}
.convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;}
.convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;}
.convention_tab li.current_tab a{background-color:#98B1C5;color:#000;}
.convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;}
.convention_tab li.start_tab a{padding-left:10px;}
.convention_tab li#end_tab{background-position:right -50px;}
.convention_tab li#end_tab a{padding-left:10px;}
.convention_tab li.current_tab#end_tab{background-position:right -140px;}
.convention_tab li.current_tab#end_tab a{background-color:#98B1C5;}
/*每個item*/
#cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;}
#cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;}
#cardarea2 dl{text-align:left;padding:20px;line-height:23px;}
</style>
</head>
<body>
<div class="container">
	<ul id="nav" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">全部內容</a></li>
		<li><a href="#">源碼更新</a></li>
		<li><a href="#">ASP源碼</a></li>
		<li><a href="#">PHP更新</a></li>
		<li id="end_tab"><a href="#">VB更新</a></li>
	</ul>
	<div id="cardarea">
		<div class="item"><p>這里是div中的p標簽，因為沒有指定class為item，所以我不參與切換。</p></div>
		<p class="item display_none">我在頁面加載完成后才添加的事件，可有的圖片加載很慢，所以有時候可以把外部js中的addLoadEvent(getConfigInputObj);刪除掉，然后直接書寫 getConfigInputObj();當然要放在</html>以保證xhtml已經加載完畢</p>
		<p class="item display_none">看網上演示Jquery的tab插件更加強大，不過我這個更為實用，o(∩_∩)o...。</p>
		<p class="item display_none">PHP更新的內容</p>
		<p class="item display_none">VB更新的內容</p>
	</div>
	<ul id="nav2" class="convention_tab">
		<li class="start_tab current_tab"><a href="/">全部內容</a></li>
		<li><a href="#">使用方法</a></li>
		<li><a href="#">下載排行</a></li>
		<li><a href="#">源碼分類</a></li>
		<li id="end_tab"><a href="#">最后一個</a></li>
	</ul>
	<div id="cardarea2">
		<p class="item">重用性極高,在IE6+,Firefox2+,Opera9中均能正常工作，且并沒有使用hack。</p>
		<p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="這個必不可少" /> </span>即可完成事件添加,多個區域用豎線隔開。</p>
			<div class="item display_none">
			<dl>
				<dt>id為kp_OtherRegional的input元素共有5個參數</dt>
				<dd>第一個:表示id為nav的那個元素。</dd>
				<dd>第二個:獲取到第一步的元素，遍歷指定的元素，這取決于你寫的什么標簽，寫的li它就會遍歷li。</dd>
				<dd>第三個:切換區域的父容器,切換區域的父容器ID</dd>
				<dd>第四個:<p class="item",這里沒有限定是什么元素，而是限定帶有指定class的才能參與切換。</dd>
				<dd>第五個:切換標簽后當前標簽的樣式名。</dd>
			</dl>
		</div>
		<p class="item display_none">這里是第四個區域</p>
		<p class="item display_none">第五個</p>
	</div>
</div>
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="這個必不可少" />
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

所屬頻道：菜單導航特效/更新時間：2011-02-23

[收藏][報錯][返回列表]

相關菜單導航特效：

網頁選項卡(很個性)_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些