使用css和javascript实现Tab选项卡

发布时间：2018-08-18 14:56 所属栏目：25 来源：站长网

导读：烈火网(LieHuo.Net)教程在前面的教程中，我们曾经讲过一篇《选项卡(Tab)鼠标自动手动切换效果》的文章，在这篇文章中，我们已经介绍了关于类似 IE浏览器选项卡的三种形式。无独有偶，今天在博客园再次看这样的例子，于是再次转载过来给大家分享，希望各

　　烈火网(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> </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,列车时刻表,邮编区号,电话号码,车牌号查询,<b>万年历</b>,在线翻译,html转换js,WEB在线编辑,UTF8转换,MD5加密,网页加密解密,BASE64编码加密,国家地区代码 </div> </div> </body> </html>
提示：可修改后代码再运行!

　　原文出自：博客园。

（编辑：ASP站长网）