index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入外部的样式-->
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div id="tab">
<!--头部-->
<div id="tab-header">
<ul>
<li class="selected">公告</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"></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{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
body{
margin: 100px;
}
#tab{
border:1px solid #dddddd;
width: 498px;
height: 120px;
/*裁剪超出部分*/
overflow: hidden;
}
#tab-header{
height: 38px;
line-height: 38px;
background-color: #F7F7F7;
text-align: center;
position: relative;
}
#tab-header ul{
width: 501px;
position: absolute;
left:-1px;
}
#tab-header ul li{
float: left;
/*background-color: red;*/
width: 98px;
/*内填充*/
padding: 0 1px;
/*下线*/
border-bottom: 1px solid #dddddd;
}
#tab-header ul li.selected{
background-color: white;
/*下线*/
border-bottom: 0;
/*内填充*/
padding: 0;
/*设置左右线条*/
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
#tab-content .dom{
display: none;
}
#tab-content .dom a{
/*background-color: red;*/
width: 220px;
/*左浮动*/
float: left;
margin:8px;
}
index.js
function $(id) {
// 类型的比较
return typeof id === 'string' ? document.getElementById(id): id;
}
// 当网页加载完毕是调用
window.onload = function () {
// 拿到所有的li标签和对应的内容
var lis = $('tab-header').getElementsByTagName('li');
var contents = $('tab-content').getElementsByClassName('dom');
// console.log(lis, contents);
// 验证
if(lis.length !== contents.length) return;
// 遍历
for(var i=0; i<lis.length; i++){
// 取出每一个li标签
var li = lis[i];
// console.log(li);
li.id = i;
// 监听鼠标在li上面的移动
li.onmousemove = function () {
for(var j=0; j<lis.length; j++){
//让所有的li标签都不被选中
lis[j].className = '';
contents[j].style.display = 'none';
}
// 设置当前对象的className
this.className = 'selected';
contents[this.id].style.display = 'block';
}
}
}