index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tab选项卡</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--最外层-->
<div id="tab">
<!--头部-->
<div id="tab-header">
<ul>
<li class="select">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<!--主要内容-->
<div id="tab-content">
<div class="dom" style="display: block">
<ul>
<li>
<a href="#">数据七夕:金牛爱送玫瑰</a>
</li>
<li>
<a href="#">阿里打造"互联网监管"</a>
</li>
<li>
<a href="#">10万家店60万新品</a>
</li>
<li>
<a href="#">全球最大网上时装周</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">“全额返现”要管控啦</a>
</li>
<li>
<a href="#">淘宝新规发布汇总(7月)</a>
</li>
<li>
<a href="#">炒信规则调整意见反馈</a>
</li>
<li>
<a href="#">质量相关规则近期变更</a>
</li>
</ul>
</div>
<div class="dom">
<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="dom">
<ul>
<li>
<a href="#">接次文件，毁了一家店</a>
</li>
<li>
<a href="#">账号安全神器阿里钱盾</a>
</li>
<li>
<a href="#">新版阿里110上线了</a>
</li>
<li>
<a href="#">卖家学违禁避免被处罚</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">为了公益high起来</a>
</li>
<li>
<a href="#">魔豆妈妈在线申请</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
index.css
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0px;
margin: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
#tab{
width: 498px;
height: 130px;
border: 1px solid #ddd;
overflow: hidden;
margin: 20px 0px 0px 20px;
}
#tab #tab-header{
height: 36px;
background-color: #F7F7F7;
position: relative;
}
#tab #tab-header ul{
width: 500px;
position: absolute;
left: -1px;
}
#tab #tab-header ul li{
float: left;
width: 98px;
height: 36px;
line-height: 36px;
text-align: center;
padding: 0px 1px;
border-bottom: 1px solid #ddd;
}
#tab #tab-header ul li.select{
background-color: white;
border-bottom: 0px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 0px;
}
#tab #tab-header ul li:hover{
color: orangered;
cursor: pointer;
font-weight: bolder;
}
/* 内容部分*/
#tab #tab-content .dom{
display: none;
}
#tab #tab-content .dom ul li{
float: left;
width: 240px;
margin-left: 4px;
margin-top: 15px;
}
3.index.js
/**
* Created by xiaomage on 15/9/1.
*/
// == 值比较 === 类型比较
// $(id) ----> document.getElementById(id)
function $(id){
return typeof id === 'string' ? document.getElementById(id):id;
}
window.onload = function(){
// 拿到所有的li标签(标题) 和 li对应的内容div
var titles = $('tab-header').getElementsByTagName('li');
var divs = $('tab-content').getElementsByTagName('div');
// 判断
if(titles.length != divs.length) return;
for(var i=0; i<titles.length; i++){
var li = titles[i];
li.id = i;
li.onmousemove = function(){
for(var j=0; j<titles.length; j++){
titles[j].className = '';
divs[j].style.display ='none';
}
// 让当前的被选中
this.className = 'select';
divs[this.id].style.display = 'block';
}
}
}
网友评论