tab切换——点击
<!doctype html>
<html lang="'en">
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
</head>
<style>
*{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:#F7F7F7;}
.notice-tit ul{position:absolute;
width:301px;
left:-1px;}
.notice-tit li{float:left;
width:58px;
height:26px;
line-height:26px;
text-align:center;
overflow:hidden;
background:#FFF;
padding:0 1px;
background:#F7F7F7;
border-bottom:1px solid #eee;}
.notice-tit 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 li a:visited{text-decoration:none;
color:#000;}
.notice li a:hover{color:#F90;}
.notice-con .mod{margin:10px 6px;}
.notice-con .mod ul li{float:left;
width:143px;
height:25px;
overflow:hidden;}
</style>
<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="www.qianduanzhan.com">
前端站
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
function $(id){
return typeof id ==="string"?document.getElementById(id):id;
}
window.οnlοad=function(){
var lis=$('notice-tit').getElementsByTagName('li'),
divs=$('notice-con').getElementsByTagName('div');
for(var i=0; i<lis.length;i++){
lis[i].id=i;
lis[i].οnclick=function(){
//先清除所有li上的select
for(var j=0; j<lis.length; j++){
lis[j].className="";
divs[j].style.display="none";
}
//再给当前的li和div添加
this.className="select";
divs[this.id].style.display="block";
// alert(this.id)
}
}
}
</script>
转载于:https://blog.51cto.com/13136447/1963912