您當前位置：首頁 > web前端 > jscript > 使用css和javascript實現Tab選項卡

使用css和javascript實現Tab選項卡

來源：程序員人生發布時間：2014-03-03 18:32:43 閱讀次數：2808次

　　網(LieHuo.Net)教程 在前面的教程中，我們曾經講過一篇《選項卡(Tab)鼠標自動手動切換效果》的文章，在這篇文章中，我們已經介紹了關于類似IE瀏覽器選項卡的三種形式。無獨有偶，今天在博客園再次看這樣的例子，于是再次轉載過來給大家分享，希望各位站長和建站愛好者繼續支持網，我們會做的更好！

<!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><title>使用css和js實現Tab選項卡 - 網(LIEHUO.NET)</title><style type="text/css">ul#tabNav{width:400px;list-style:none;border-bottom:solid 1px green;margin:0;padding-left:0;padding-bottom:26px;//google瀏覽器上測試能正常顯示，可是IE7不行，所以有下面這句*padding-bottom:0;//IE7支持}ul#tabNav li{float:left;height:25px;margin:0 10px -2px 0;//關鍵地方background-color:Green;color:black;border:solid 1px Green;border-bottom:0;padding:0;}ul#tabNav a:link,ul#tabNav a:visited{display:block;text-decoration:none;padding:5px 10px 3px 10px;}#tabContent{width:400px;height:200px;border:solid 1px green;border-top-width:0;}#tabNav li.tabSelected{border-bottom:solid 1px white; //關鍵地方background-color:White;color:Black;}</style><script type="text/javascript"> function showContent(index) { var e = document.getElementById("content"+index); e.style.display = ""; for(var i=1; i<4; i++) { if(i != index) { var e2 = document.getElementById("content"+i); e2.style.display = "none"; document.getElementById("tab"+i).className=""; } else { document.getElementById("tab"+i).className="tabSelected"; } } } </script></head><body><ul id="tabNav"><li onmouseover="showContent(1)" id='tab1' class="tabSelected"><a href='#' _fcksavedurl='#'>網站首頁</a></li><li onmouseover="showContent(2)" id='tab2' class="""><a href='#' _fcksavedurl='#'>交流論壇</a></li><li onmouseover="showContent(3)" id='tab3' class=""><a href='#' _fcksavedurl='#'>站長工具</a></li></ul><div id="tabContent"><div id="content1" >是全球中文互聯網資訊與教程的提供者,多年來一直堅持為互聯網發展提供動力,熱情、積極、向上、不斷進取是Liehuo.Net所提倡的品格!</div><div id="content2" style="display:none">軟件官方論壇，主要致力于軟件編程與開發,產品有：LieHuoWMS、QQ、系列軟件，同時有電腦、手機、建站、數碼、娛樂、各類破解軟件與注冊機等交流,論壇 LieHuoBBS - 軟件官方論壇，菜鳥級IT技術交流社區!</div><div id="content3" style="display:none">站長工具,IP/域名查詢,網站排名(alexa),身份證,手機,網頁PR收錄,域名Whois,列車時刻表,郵編區號,電話號碼,車牌號查詢,萬年歷,在線翻譯,html轉換js,WEB在線編輯,UTF8轉換,MD5加密,網頁加密解密,BASE64編碼加密,國家地區代碼</div></div></body></html>
提示：可修改后代碼再運行!

　　原文出自：博客園。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 CCNP實驗:BGP路由聚合基礎

下一篇 JS解決表單依舊提交即使監聽處理函數返回false

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

使用css和javascript實現Tab選項卡