您当前位置：首页 > web前端 > jscript > 使用css和javascript实现Tab选项卡

使用css和javascript实现Tab选项卡

来源：程序员人生发布时间：2014-03-03 18:32:43 阅读次数：2509次

　　网(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关注

栏目热点