风格经典，无任何修饰无图的CSS选项卡特效

发布时间：2018-08-17 16:33:40 所属栏目：政策来源：站长网

导读：选项卡，CSS+ Java Script版，由以前的一款改写而成，自认为不错的东西，发上来分享吧。这里没有使用任何图片，看上去非常简洁，当然，你也可以自己修饰一下，用在自己的网站，还是不错的。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transition

　　选项卡，CSS+JavaScript版，由以前的一款改写而成，自认为不错的东西，发上来分享吧。这里没有使用任何图片，看上去非常简洁，当然，你也可以自己修饰一下，用在自己的网站，还是不错的。

　　演示：

<!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>JS+CSS的选项卡，无图片-烈火学院 Liehuo.Net</title> <script type="text/javascript"> </script> <style type="text/css"> * { margin:0; padding:0; word-break:break-all; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#333; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } #hotnews { width:260px; margin:1px; margin-left:auto; margin-right:auto;font-size:12px;} #hotnews_caption { width:260px; overflow:hidden; border-bottom:1px solid #FAFAFA; } #hotnews_caption ul { float:right; } #hotnews_caption ul li { float:left; border-left:1px solid #FFF; width:85px; line-height:25px; text-align:center; cursor:pointer;font-size:12px; } #hotnews_caption .normal { background:#E4E4E4; } #hotnews_caption .current{ background:#C2130E; color:#FFF; } #hotnews_content {} #hotnews_content .normal { display:none; } #hotnews_content .current { display:block; } #hotnews_content ul { padding:8px 0 0 5px; } #hotnews_content ul li a { font-size:12px;letter-spacing:1pt;line-height:14pt;} </style> <script type="text/javascript"> function secBoard(elementID,listName,n) { var elem = document.getElementById(elementID); var elemlist = elem.getElementsByTagName("li"); for (var i=0; i<elemlist.length; i++) { elemlist[i].className = "normal"; var m = i+1; document.getElementById(listName+"_"+m).className = "normal"; } elemlist[n-1].className = "current"; document.getElementById(listName+"_"+n).className = "current"; } </script> </head> <body style=" margin-top:15px;"> <div id="hotnews"> <div id="hotnews_caption"> <ul> <li class="current" onclick="secBoard('hotnews_caption','list',1);">烈火学院</li> <li class="normal" onclick="secBoard('hotnews_caption','list',2);">烈火下载</li> <li class="normal" onclick="secBoard('hotnews_caption','list',3);">烈火论坛</li> </ul> </div> <div id="hotnews_content"> <div class="current" id="list_1"> <ul> <li> <a href="http://www.veryhuo.com" target="_top">以提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习平台！</a></li> </ul> </div> <div class="normal" id="list_2"> <ul> <li> <a href="http://www.veryhuo.com/down" target="_top">烈火下载提供绿色软件,素材,脚本资源,C#源码,VC/C++源码,VB源码,Delphi源码,Java源码,JSP源码,.NET源码,PHP源码,ASP源码等,模板插件,书籍文档等精品源码与绿色软件。</a></li> </ul> </div> <div class="normal" id="list_3"> <ul> <li> <a href="http://bbs.liehuo.net" target="_top">烈火论坛 LieHuoBBS 主要有站长,电脑,手机,编程,数码,破解,注册机,精品软件等为主的技术交流,同时有烈火原创教程,游戏,新闻及娱乐等内容,烈火论坛打造专业的IT技术交流社区。</a></li> </ul> </div> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!