模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
又一淘寶網的TAB選項卡,很圓滑_菜單導航特效
查看演示效果
特效Tag:
選項卡
Tab
添加
又一個淘寶網的TAB選項卡,很圓滑,經典之作,用到四張背景圖片,請依次下載。
<html> <head> <title>淘寶網的TAB選項卡</title> <style> body {font-size:12px;} ul.TabBarLevel1{ list-style:none; margin:0; padding:0; height:29px; background-image:url(http://p1.mb5u.com/texiao/tabbar_level1_bk.gif); } ul.TabBarLevel1 li{ float:left; padding:0; height:29px; margin-right:1px; background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a{ display:block; line-height:29px; padding:0 20px; color:#333; background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; } ul.TabBarLevel1 li.Selected{ background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a{ background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{ color:#333; } ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{ color:#F30; text-decoration:none; } ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{ color:#000; } ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{ color:#F30; text-decoration:none; } div.HackBox { padding : 2px 2px ; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; } </style> </head> <body> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">寶貝詳情</a></li> <li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">其他信息</a></li> <li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');">出價記錄</a></li> <li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a></li> </ul> </div> <script language="JavaScript"> function switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage); for(var i=0;i<oItem.children.length;i++){ var x = oItem.children(i); x.className = ""; var y = x.getElementsByTagName('a'); y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; } </script> </body> </html>
所屬頻道:
菜單導航特效
/
更新時間:2011-02-24
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
CSS選項卡、滑動門代碼
CSS經典Tab滑動門菜單
一個選項卡Tab的雛形
JS版下拉菜單生成器
CSS導航菜單
CSS 滑動門,自己寫的,沒有圖片
CSS黑白變成彩色圖片的塊狀導航
UL、LI 無序列表實現純CSS網站導航菜單
Windows 風格選項卡標簽
左側豎向選項卡TAB
猜你也喜歡看這些
圖象滾動公告版
Marquee 圖片滾動特效
CSS強制按比例縮小圖片
騰訊JS商品滾動效果
Js+Css圖片切換,帶縮略圖響應鼠標滑過
jQuery制作的產品展示效果
Js拖動特效,一串水晶球
一組圖片向上滾屏特效
JS+CSS濾鏡實現多種圖片效果
JS+CSS漂亮相冊效果
相關鏈接:
復制本頁鏈接
|
搜索又一淘寶網的TAB選項卡,很圓滑
特效說明:
菜單導航模板
-
又一淘寶網的TAB選項卡,很圓滑
。