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>規(guī)則</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="#">阿里打造"互聯網監(jiān)管"</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="#">淘寶新規(guī)發(fā)布匯總(7月)</a>
</li>
<li>
<a href="#">炒信規(guī)則調整意見反饋</a>
</li>
<li>
<a href="#">質量相關規(guī)則近期變更</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">阿里建商家全鏈路服務</a>
</li>
<li>
<a href="#">個性化的消費時代來臨</a>
</li>
<li>
<a href="#">跨境貿易是中小企業(yè)機</a>
</li>
<li>
<a href="#">美妝行業(yè)虛假信息管控</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';
}
}
}
