標籤:func absolute .net .class win strong tab選項卡 切換 not
html部分代碼:
[html]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="notice" class="notice"> <div class="notice-tit" id="notice-tit"> <ul> <li><a href="#">公告</a></li> <li><a href="#">規則</a></li> <li><a href="#">論壇</a></li> <li><a href="#">安全</a></li> <li class="select"><a href="#">公益</a></li> </ul> </div> <div id="notice-con" class="notice-con"> <div class="mod" style="display: none;"> <ul> <li><a href="#">張勇:玩快樂足球</a></li> <li><a href="#">張勇:玩快樂足球</a></li> <li><a href="#">張勇:玩快樂足球</a></li> <li><a href="#">張勇:玩快樂足球</a></li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:玩快樂足球</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:玩快樂足球</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:玩快樂足球</a></li> <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:玩快樂足球</a></li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li><a href="#">張勇:要玩快樂</a></li> <li><a href="#">張勇:要玩快樂足球</a></li> <li><a href="#">張勇:要玩快樂足球</a></li> <li><a href="#">張勇:要玩快樂足球</a></li> </ul> </div> <div class="mod" style="display: block;"> <ul> <li><a href="#">張勇:要玩快樂</a></li> <li><a href="#">張勇:要玩快樂足球</a></li> <li><a href="#">張勇:要玩快樂足球</a></li> <li><a href="#">張勇:要玩快樂</a></li> </ul> </div> </div> </div> </body> </html>
css部分代碼:
*{ margin: 0; padding:0; list-style: none; font-size: 12px;}.notice{ width: 298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden;}.notice-tit{ height: 27px; position: relative; background-color: #f7f7f7;}.notice-tit ul{ position: absolute; width: 301px; left: -1px;}.notice-tit ul li{ float: left; width: 58px; height: 26px; text-align: center; line-height: 26px; overflow: hidden; padding: 0 1px; background: #f7f7f7; border-bottom: 1px solid #eee;}.notice-tit ul li.select{ background: #fff; border-bottom-color: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0; font-weight: bolder;}.notice li a:link,.notice-tit li a:visited{ text-decoration: none; color: #000;}.notice li a:hover{ color: #f90;}.notice-con .mod{ margin: 10px 10px 10px 19px;}.notice-con .mod ul li{ float: left; width: 134px; height: 25; overflow: hidden;}
js部分代碼:
function $(id){ return typeof id===‘string‘?document.getElementById(id):id;}window.onload = function(){ //擷取滑鼠滑過或點擊的標籤和要切換內容的元素 var titles = $(‘notice-tit‘).getElementsByTagName(‘li‘); var divs =$(‘notice-con‘).getElementsByTagName(‘div‘); // alert(divs.length); if(titles.length!=divs.length) return; //遍曆titles下的所有li for(var i=0;i<titles.length;i++) { titles[i].id = i; titles[i].onmouseover = function(){ for(var j=0;j<titles.length;j++) { //清除所有li上的class titles[j].className=‘‘; divs[j].style.display = ‘none‘; } //設定當前為高亮顯示 this.className = ‘select‘; divs[this.id].style.display = ‘block‘; } }}
效果示範:
Tab選項卡點擊 滑動效果js實現