DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 純手工寫的一個選項卡切換
純手工寫的一個選項卡切換
編輯:AJAX詳解     
概要:下面這個標簽是關鍵所在,共有5個參數,來賦予切換的功能。首先演示一下功能。以下是Html網頁特效代碼,點擊運行按鈕可查看效果: 選項卡/* 選項卡---------------------------------------------------------- ... 中間左側廣告位

下面這個標簽是關鍵所在,共有5個參數,來賦予切換的功能。

首先演示一下功能。

以下是Html網頁特效代碼,點擊運行按鈕可查看效果:

選項卡/* 選項卡----------------------------------------------------------------*/body{font-size:12px;font-family:ArialHelveticasans-serif;text-align:center;margin:12px auto 0 auto;width:600px;}h1h2h3h4h5h6pformdldtddulol{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://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/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://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/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;}

選項卡001 缺點 僅供娛樂 選項卡004 選項卡005

這裡是div中的p標簽,因為沒有指定class為item,所以我不參與切換。

我在頁面加載完成後才添加的事件,可有的圖片加載很慢,所以有時候可以把外部JS中的addLoadEvent(getConfigInputObj);刪除掉,然後直接書寫 getConfigInputObj();當然要放在以保證xHtml已經加載完畢

看網上演示Jquery的tab插件更加強大,不過我這個更為實用,o(∩_∩)o...。

第四個

第五個

優點 使用方法 參數的意思 第4個 最後一個

重用性極高在IE6+Firefox2+Opera9中均能正常工作,且並沒有使用hack。

即可完成事件添加多個區域用豎線隔開。

id為kp_OtherRegional的input元素共有5個參數 第一個:表示id為nav的那個元素。 第二個:獲取到第一步的元素,遍歷指定的元素,這取決於你寫的什麼標簽,寫的li它就會遍歷li。 第三個:切換區域的父容器切換區域的父容器ID 第四個:
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved