气魄威风凛凛经典，无任何修饰无图的CSS选项卡殊效

发布时间：2018-08-17 14:21:16 所属栏目：创业来源：站长网

导读：选项卡，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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网