前言
如果只用到id选择器，可以不引入jq，自己仿照jq封装一个简单的id选择器方法$()。
function $(id){
return typeof id ==="string"?document.getElementById(id):id;
}代码
<!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="javascript:void(0);">公告</a>
</li>
<li>
<a href="javascript:void(0);">规则</a>
</li>
<li>
<a href="javascript:void(0);">论坛</a>
</li>
<li>
<a href="javascript:void(0);">安全</a>
</li>
<li>
<a href="javascript:void(0);">公益</a>
</li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display:block">
<ul>
<li>
<a href="javascript:void(0);">
张勇：要玩快乐足球
</a>
</li>
<li>
<a href="javascript:void(0);">
阿里2000万驰援灾区！
</a>
</li>
<li>
<a href="javascript:void(0);">
旅游宝让你边玩边赚钱
</a>
</li>
<li>
<a href="javascript:void(0);">
多行跟进阿里信用贷款
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span>
[
<a href="javascript:void(0);">通知</a>
]
</span>
<a href="javascript:void(0);">
"滥发"即将换新
</a>
</li>
<li>
<span>
[
<a href="javascript:void(0);">通知</a>
]
</span>
<a href="javascript:void(0);">
比特币严管啦！
</a>
</li>
<li>
<span>
[
<a href="javascript:void(0);">通知</a>
]
</span>
<a href="javascript:void(0);">
禁发商品名录！
</a>
</li>
<li>
<span>
[
<a href="javascript:void(0);">通知</a>
]
</span>
<a href="javascript:void(0);">
商品属性限制
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span>
[
<a href="javascript:void(0);">聚焦</a>
]
</span>
<a href="javascript:void(0);">
金牌卖家再启航
</a>
</li>
<li>
<span>
[
<a href="javascript:void(0);">功能</a>
]
</span>
<a href="javascript:void(0);">
橱窗规则升级啦
</a>
</li>
<li>
<span>
[
<a href="javascript:void(0);">话题</a>
]
</span>
<a href="javascript:void(0);">
又爱又恨优惠劵
</a>
</li>
<li>
<span>
[
<a href="javascript:void(0);">工具</a>
]
</span>
<a href="javascript:void(0);">
购后送店铺红
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<a href="javascript:void(0);">
个人重要信息要管牢！
</a>
</li>
<li>
<a href="javascript:void(0);">
卖家防范红包欺诈提醒
</a>
</li>
<li>
<a href="javascript:void(0);">
更换收货地址的陷阱！
</a>
</li>
<li>
<a href="javascript:void(0);">
注意骗子的技术升级了！
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<a href="javascript:void(0);">
走进无声课堂
</a>
</li>
<li>
<a href="javascript:void(0);">
淘宝之行大众评审赢公益金
</a>
</li>
<li>
<a href="javascript:void(0);">
爱心品牌联合征集
</a>
</li>
<li>
<a href="javascript:void(0);">
名公益机构淘宝开店攻略
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
function $(id){
return typeof id ==="string"?document.getElementById(id):id;
}
window.onload=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].onclick=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>
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
