tab欄切換.jpg
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//需求：鼠標放到上面的li上次伶，li本身變色(添加類)，對應(yīng)的span也顯示出來(添加類);
//思路：1.點亮盒子通砍。 2.利用索引值顯示盒子用狱。
//步驟：
//1.獲取事件源和相關(guān)元素
//2.綁定事件
//3.書寫事件驅(qū)動程序（排他思想）
//1.獲取事件源和相關(guān)元素
var boxArr = document.getElementsByClassName("box");
//函數(shù)調(diào)用
for(var i=0;i<boxArr.length;i++){
fn(boxArr[i]);
}
//函數(shù)封裝
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
//2.綁定事件（循環(huán)綁定）
for(var i=0;i<liArr.length;i++){
//綁定索引值(自定義屬性)
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//3.書寫事件驅(qū)動程序（排他思想）
//1.點亮盒子镜粤。 2.利用索引值顯示盒子觉壶。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
}
}
//方法二：
window.onload = function () {
//需求：鼠標放到上面的li上，li本身變色(添加類)缝裤，對應(yīng)的span也顯示出來(添加類);
//思路：1.點亮盒子屏轰。 2.利用索引值顯示盒子。
//步驟：
//1.獲取事件源和相關(guān)元素
//2.綁定事件
//3.書寫事件驅(qū)動程序（排他思想）
//1.獲取事件源和相關(guān)元素
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
//2.綁定事件（循環(huán)綁定）
for(var i=0;i<liArr.length;i++){
//綁定索引值
liArr[i].index = i;
liArr[i].onmouseover = function () {
//3.書寫事件驅(qū)動程序（排他思想）
//1.點亮盒子憋飞。 2.利用索引值顯示盒子霎苗。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show";
}
}
}
//方法三：
window.onload = function () {
var boxArr = document.getElementsByClassName("box");
for(var i=0;i<boxArr.length;i++){
fn(boxArr[i]);
}
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
liArr[i].index = i;
liArr[i].onmouseover = function () {
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show";
}
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
</body>
</html>
