純CSS內(nèi)頁內(nèi)容切換選項(xiàng)卡

2009-12-19 文本操作 ℃

<html>
<head>
<title>純CSS內(nèi)頁內(nèi)容切換選項(xiàng)卡-well-network.com</title>
<style type="text/css">

a img{border:0}

.hidden{display:none}/*隱藏*/

/*日記的選項(xiàng)卡*/
div.tab ul{margin:0;padding:0;list-style:none}
div.tab ul li{float:left;padding:0 5px 2px 0;}
div.tab ul li.s{padding-bottom:0;}
div.tab a{text-align:center;width:40px;display:block;text-decoration:none;color:#658A16;background:#E2F3B8;padding:2px 5px;height:20px;line-height:20px;}
div.tab li.s a{background:#658A16;color:#E2F3B8;height:26px;padding-bottom:2px;font-weight:bold;cursor:default;}
div.tab a:hover{background:#658A16;color:#E2F3B8;text-decoration:underline;}
div.tab li.s a:hover{text-decoration:none;}
div.content{clear:both;border:solid 1px #658A16;border-width:5px 1px 1px;}
</style>
<script type="text/javascript">
//<![CDATA[

$=function(id){return document.getElementById(id);}

var oldSelectedTabId = null;//上次選中的選項(xiàng)卡

/*初始化日記的選項(xiàng)卡*/
initTab=function(t){
  var tab = $(t);//取得選項(xiàng)卡標(biāo)簽對(duì)象
  if (!tab)return;//沒有這個(gè)東東就退出
  var hs = tab.getElementsByTagName('a');//取得所有的超鏈接
  var l = hs.length;//超鏈接長度
  for (var i = 0;i < l ;i++ ){//遍歷超鏈接
    var a = hs[i];//取得一個(gè)超鏈接
    a.onclick=function(ev){//設(shè)置超鏈接的onclick事件
      this.blur();//先把超鏈接的焦點(diǎn)去了……
      toggleTab(this);//單擊選項(xiàng)卡標(biāo)簽時(shí)，切換選項(xiàng)卡,調(diào)用自定義函數(shù)toggleTab
    }
    if (hasClass(a.parentNode,"s"))//如果這個(gè)超鏈接的上一層（li）的class是s的話
      toggleTab(a);//如果當(dāng)前超鏈接是被選中的標(biāo)簽，切換選項(xiàng)卡
    else
     addClass(getTabObj(a.id,"content"),"hidden");//如果當(dāng)前標(biāo)簽未被選中，隱藏當(dāng)前標(biāo)簽顯示內(nèi)容
    
    a.href="javascript:void(0)"http://將當(dāng)前超鏈接的href清除，避免url中出現(xiàn)#...
  }
  if (!oldSelectedTabId)//如果沒設(shè)置默認(rèn)選中標(biāo)簽，則認(rèn)為第一個(gè)標(biāo)簽被選中
    toggleTab(hs[0]);
}

//切換選項(xiàng)卡
toggleTab = function(a){
  if (!a)return;//如果沒有對(duì)象，退出（可能的情況，選項(xiàng)卡為空……）
  if (oldSelectedTabId&&oldSelectedTabId==a.id)return;//如果還是選擇當(dāng)前選項(xiàng)卡，直接退出
  else if (oldSelectedTabId){//如果之前選擇過選項(xiàng)卡標(biāo)簽而且不是當(dāng)前選項(xiàng)卡
    removeClass(getTabObj(oldSelectedTabId,"href").parentNode,"s");//移除超鏈接上一層的被選中樣式
    addClass(getTabObj(oldSelectedTabId,"content"),"hidden");//設(shè)置之前被選中選項(xiàng)卡內(nèi)容隱藏
  }
  addClass(a.parentNode, "s");//設(shè)置該超鏈接上一層為被選中
  oldSelectedTabId = a.id;//設(shè)置之前被選中選項(xiàng)卡為當(dāng)前選項(xiàng)卡
  removeClass(getTabObj(a.id,"content"),"hidden");//將當(dāng)前選項(xiàng)卡的內(nèi)容設(shè)置為不隱藏
}

//取得對(duì)應(yīng)id的對(duì)象
getTabObj=function(id,type){//用來將給定的id替換成正確的id
  var TYPE = {content:"c_",href:"h_"}//類型:內(nèi)容（content）和超鏈接(href)
  var r = /(c_|h_)/g//用于替換的正則
  return $(id.replace(r,TYPE[type]));//返回對(duì)應(yīng)id的對(duì)象
}

//是否存在指定樣式class
hasClass = function(obj,className){
  if (!obj||!obj.className)return false;//如果對(duì)象或者對(duì)象class不存在就退出
  return new RegExp("\\b"+className+"\\b","g").test(obj.className);//用正則判斷對(duì)象是否有指定class
}

//增加樣式class
addClass = function(obj,className){
  if (!obj)return false;//如果對(duì)象不存在就退出
  obj.className = obj.className + " " + className+" ";//給對(duì)象增加class
}

//刪除指定樣式class
removeClass = function(obj,className){
  if (!obj||!obj.className)return false;//如果對(duì)象或者對(duì)象class不存在就退出
  obj.className = obj.className.replace(new RegExp("\\b"+className+"\\b","g"),"").replace(/^\s*|\s$/g,"")//用正則替換掉原來的不要的class，并去除頭尾多余的空格
}

//]]>
</script>
</head>
<body onload="initTab('tab')">
<div   id="aol2mzr"   class="tab" id="tab">
	<ul>
		<li id="qyghvm5"    class="s"><a href="#href_study" id="h_study">學(xué)習(xí)</a></li>
		<li ><a href="#href_book" id="h_book">讀書</a></li>
		<li ><a href="#href_tech" id="h_tech">技術(shù)</a></li>
	</ul>
</div>
<div   id="jqy5fn1"   class="content">
	<div   class="z1czcog"   id="c_study">
		<h3 class="goback">日記>><a href="###" id="href_study" title="跳轉(zhuǎn)到該類日記">學(xué)習(xí)</a></h3>
		<ul class="diarylist">
			<li><a href="###">第一學(xué)期考試過了:D(點(diǎn)擊數(shù):65)</a><span>2006-07-31 01:34 </span></li>
			<li><a href="###">讀書計(jì)劃推遲(點(diǎn)擊數(shù):33)</a><span>2006-07-17 22:53 </span></li>
			<li><a href="###">復(fù)習(xí)時(shí)間到~(點(diǎn)擊數(shù):51)</a><span>2006-07-17 12:20 </span></li>
			<li><a href="###">第一次期末考試總結(jié)(點(diǎn)擊數(shù):40)</a><span>2006-07-07 23:00 </span></li>
		</ul>
	</div>
	<div   class="igyzhp6"   id="c_book">
	<h3 class="goback">日記>><a href="###" id="href_book" title="跳轉(zhuǎn)到該類日記">讀書</a></h3>
	<ul class="diarylist">
		<li><a href="###">余華的《兄弟》(點(diǎn)擊數(shù):76)</a><span>2006-08-03 01:43 </span></li>
		<li><a href="###">看完《鯨圖騰》了(點(diǎn)擊數(shù):41)</a><span>2006-07-16 14:16 </span></li>
		<li><a href="###">可可西里(點(diǎn)擊數(shù):26)</a><span>2004-12-11 13:37 </span></li>
		<li><a href="###">看完《花妖》(點(diǎn)擊數(shù):29)</a><span>2004-09-24 16:38 </span></li>
		<li><a href="###">《活著》(點(diǎn)擊數(shù):41)</a><span>2004-09-18 06:23 </span></li>
		<li><a href="###">買了新碟(點(diǎn)擊數(shù):27)</a><span>2004-07-29 20:37 </span></li>
		<li><a href="###">看完了《鳥的遷徙》(點(diǎn)擊數(shù):28)</a><span>2004-07-13 20:28 </span></li>
		<li><a href="###">讀書計(jì)劃(點(diǎn)擊數(shù):47)</a><span>2004-07-12 20:06 </span></li>
		<li><a href="###">終于看完了《我的死了的生活的回憶》(點(diǎn)擊數(shù):30)</a><span>2004-07-11 20:05 </span></li>
		<li><a href="###">悟空傳 讀書筆記(點(diǎn)擊數(shù):30)</a><span>2004-07-08 12:15 </span></li>
	</ul>
	</div>
	<div   class="r15kne5"   id="c_tech">
	<h3 class="goback">日記>><a href="###" id="href_tech" title="跳轉(zhuǎn)到該類日記">技術(shù)</a></h3>
	<ul class="diarylist">
		<li><a href="###">QuiXplorer 2.3功能補(bǔ)強(qiáng)(點(diǎn)擊數(shù):14)</a><span>2006-08-22 01:11 </span></li>
		<li><a href="###">許愿墻筆記(1):目錄[草稿](點(diǎn)擊數(shù):27)</a><span>2006-08-21 14:48 </span></li>
		<li><a href="###">許愿墻(點(diǎn)擊數(shù):68)</a><span>2006-08-19 03:00 </span></li>
		<li><a href="###">我的pagerank查詢接口(點(diǎn)擊數(shù):110)</a><span>2006-08-06 00:59 </span></li>
		<li><a href="###">W3的幽默(點(diǎn)擊數(shù):91)</a><span>2006-08-02 23:28 </span></li>
	</ul>
	</div>
</div>
<p><a href="http://well-network.com"  target='new'>網(wǎng)頁特效</a></p>
</body>
</html>

相關(guān)特效代碼

熱門特效代碼: 輸入框的文字閃爍變色引人注意; 純CSS內(nèi)頁內(nèi)容切換選項(xiàng)卡; 鼠標(biāo)經(jīng)過鏈接顯示注釋旋轉(zhuǎn)風(fēng)火輪; 指向自動(dòng)選擇的輸入框; 放大鏡鏈接效果; 帶注釋的鏈接特效; 文字閃爍效果; 帶注釋的鏈接特效代碼; 點(diǎn)擊文字顯示隱藏鏈接; WEB2.0圓形邊框css做法

推薦特效代碼: 字符連續(xù)消隱; 文字變色逐個(gè)出現(xiàn); 段落文字百葉窗效果輸出; 點(diǎn)擊文字顯示隱藏鏈接; 文字由小變大由大變�。▌�(dòng)態(tài)變化; 文字來回上下移動(dòng)或跳動(dòng)