CSS+JS选项卡

最新推荐文章于 2024-09-22 22:20:10 发布

shunjian000

最新推荐文章于 2024-09-22 22:20:10 发布

阅读量106

点赞数

文章标签： CSS 制造 XHTML HTML

本文链接：https://blog.csdn.net/shunjian000/article/details/83370833

版权

已封装好的CSS+JS选项卡效果，查看预览效果

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>佐佐制造---选项卡secBoard</title> <script type="text/javascript"> </script> <style type="text/css"> /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } 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:300px; margin:100px; } #hotnews_caption { width:300px; overflow:hidden; border-bottom:3px solid #C2130E; } #hotnews_caption ul { float:right; } #hotnews_caption ul li { float:left; border-left:1px solid #FFF; width:50px; line-height:25px; text-align:center; cursor:pointer; } #hotnews_caption .normal { background:#CCC; } #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:14px; } </style> <script type="text/javascript"> function getElementsByClassName(oElm, strTagName, strClassName) { var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/-/g, "\-"); var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)"); var oElement; for(var i=0; i<arrElements.length; i++){ oElement = arrElements[i]; if(oRegExp.test(oElement.className)){ arrReturnElements.push(oElement); } } return (arrReturnElements) } function secBoard(elementID) { var opCaption = document.getElementById(elementID+"_caption").getElementsByTagName("li"); var opContects = document.getElementById(elementID+"_content") var opContect = getElementsByClassName(opContects, "div", "normal"); var len = opCaption.length; //len=3 var flag = 0; opCaption[flag].className = "current"; opContect[flag].className = "current"; for (var i=0; i<len; i++) { opCaption[i].value = i; //opCation[0]=0 opCaption[i].onclick = function() { for(var j=0; j<len; j++) { if(opCaption[j].value == this.value) { opCaption[j].className = "current"; opContect[j].className = "current"; } else { opCaption[j].className = "normal"; opContect[j].className = "normal"; } } } } } window.onload = function() {secBoard("hotnews"); } /* 重要提示: 在将作用的层中加上id=elementID 标题id为elementID_caption 内容id为elementID_content, 并给作用的节点分别选用normal / current两个显示隐藏样式 */ </script> </head> <body> <div id="hotnews"> <div id="hotnews_caption"> <ul> <li class="normal">新闻</li> <li class="normal">火炬</li> <li class="normal">图片</li> <li class="normal">锐点</li> </ul> </div> <div id="hotnews_content"> <div class="normal"> <ul> <li><a href="#">[新闻]轿车逆行撞死斑马线上7岁后逃逸</a></li> <li><a href="#">[新闻]乌鲁木齐警方抓捕疑犯遭暴力</a></li> <li><a href="#">[新闻]河南驻马店警方配备宝马警车领导开道</a></li> </ul> </div> <div class="normal"> <ul> <li><a href="#">[火炬]轿车逆行撞死斑马线上7岁学后逃逸</a></li> <li><a href="#">[火炬]网友创作歌曲"人民心疼你"表达理敬意</a></li> <li><a href="#">[火炬]河南驻马店警方配备宝马警车</a></li> </ul> </div> <div class="normal"> <ul> <li><a href="#">[图片]轿车逆行撞死斑马线上7岁学童后逃逸</a></li> <li><a href="#">[图片]网友创作歌曲"人民心疼你"总理敬意</a></li> <li><a href="#">[图片]河南驻马店警方配备宝马警车为领导开道</a></li> </ul> </div> <div class="normal"> <ul> <li><a href="#">[锐点]轿车逆行撞死斑马线上7岁学童后逃逸</a></li> <li><a href="#">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></li> <li><a href="#">[锐点]河南驻马店警方配备宝马警车导开道</a></li> </ul> </div> </div> </div> </body> </html>