//js
function?getId(id)?{
return?typeof?id?===?'string'???document.getElementById(id)?:?id;
}
window.onload?=?function?()?{
var?titLis?=?getId('notice-title').getElementsByTagName('li');
var?mods?=?getId('notice-content').getElementsByTagName('div');
console.log(mods.length?+?titLis.length);
//確保titles的個數與content個數相等
if?(titLis.length?!=?mods.length)?return;
for(var?i?=?0;i?<?titLis.length;?i?++)?{
console.log(titLis[i]);
//給每個li加上索引屬性id，方便后面的content里面的div調用
titLis[i].id?=?i;
//鼠標滑過時給每一個li元素加上select高亮顯示
titLis[i].onmouseover?=?function()?{
for(var?j?=?0;j?<?titLis.length;j?++)?{
titLis[j].className?=?'';//添加高亮之前去除之前的高亮樣式，不然就會點一個高亮增加一個，而不是只選中一個
mods[j].style.display?=?'none';?//全部隱藏，方便后邊mods顯示內容
}
this.className?=?'select';
mods[this.id].style.display?=?'block';
}
}
}
//CSS
*?{
padding:?0;
margin:?0;
font-size:?16px;
list-style:?none;
text-decoration:?none;
}
.notice?{
width:?298px;
height:?98px;
border:?1px?solid?#eee;
overflow:?hidden;
margin:?100px?auto;
}
.notice-title?{
background-color:?#f7f7f7;
height:?27px;
position:?relative;
}
.notice-title?ul?{
width:?301px;
left:?-1px;?//為了不讓最左邊和最右邊的tab的左邊框和右邊框與最外層的盒子的邊框重疊
position:?absolute;
}
.notice-title?li?{
float:?left;
width:?58px;?//301px/5個li元素，每個li元素還要加1px的邊框
height:?26px;
line-height:?26px;?//要加一個底邊框,沒有高亮的時候
color:?black;
text-align:?center;
border-bottom:?1px?solid?#eee;
background-color:?#f7f7f7;
}
.notice-title?li.select?{
background-color:?#fff;
border-bottom-color:?#fff;
border-left:?1px?solid?#eee;
border-right:?1px?solid?#eee;
font-weight:?bold;
}
.notice-title?li?a:link,.notice-title?li?a:visited?{
color:?black;
}
.notice-title?li?a:hover?{
color:?#f90;
}
.notice-content?.mod?{
overflow:?hidden;
margin:?10px?10px?10px?19px;
}
//html
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>tab-面向過程的制作多種切換效果</title>
<link?rel="stylesheet"?type="text/css"?href="../css/tab_process.css">
<script?type="text/javascript"?src="../js/tab_process.js"></script>
</head>
<body>
<!--?tab切換外層盒子?-->
<div?class="notice">
<div?class="notice-title"?id="notice-title">
<ul>
<li?class="select"><a?href="#">切換1</a></li>
<li><a?href="#">切換2</a></li>
<li><a?href="#">切換3</a></li>
<li><a?href="#">切換4</a></li>
<li><a?href="#">切換5</a></li>
</ul>
</div>
<div?class="notice-content"?id="notice-content">
<div?class="mod">1111</div>
<div?class="mod">2222</div>
<div?class="mod">3333</div>
<div?class="mod">4444</div>
<div?class="mod">5555</div>
</div>
</div>
</body>
</html>
2017-06-22
li元素的索引
2017-06-22
切換5的時候多出一部分背景色
2017-06-22
運行的效果