js之选项卡效果
<!doctype html> <html lang="'en"> <head> <meta charset="UTF-8"> <title>Tab切换-自动</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="notice" class="notice"> <div id="notice-tit" class="notice-tit"> <ul> <li class="select"> <a href="#">公告</a> </li> <li> <a href="#">规则</a> </li> <li> <a href="#">论坛</a> </li> <li> <a href="#">安全</a> </li> <li> <a href="#">公益</a> </li> </ul> </div> <div id="notice-con" class="notice-con"> <div class="mod" style="display:block"> <ul> <li> <a href="#"> 张勇：要玩快乐足球 </a> </li> <li> <a href="#"> 阿里2000万驰援灾区！ </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: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> </div> </body> </html>
javascript部分
function $(id){ return typeof id==='string'?document.getElementById(id):id; //之后用到id选择器可以简写 } window.onload=function(){ // 获取所有的页签和要切换的内容 var titles=$('notice-tit').getElementsByTagName('li'); var divs=$('notice-con').getElementsByTagName('div'); if(titles.length!=divs.length) return; // 遍历每一个页签且给他们绑定事件 for(var i=0;i<titles.length;i++){ titles[i].id=i; titles[i].onmouseover=function(){ //清楚所有li上的class for(j=0;j<titles.length;j++){ titles[j].className=""; divs[j].style.display="none"; } //设置当前Li为高亮显示 this.className="select"; divs[this.id].style.display="block"; } }; }
