选项卡效果

来源：互联网发布：mac python环境图标编辑：程序博客网时间：2024/05/23 11:51

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}

#main {
width: 500px;
margin: 20px auto;
text-align: center;
}

span {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background: yellow;
border: 1px solid red;
text-align: center;
cursor: pointer;
}

p {
width: 313px;
height: 100px;
line-height: 100px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
background: green;
display: none;
}

.active {
display: inline-block;
background: lightgreen;
}
</style>
</head>
<body>
<div id="main">
<span class="active">第一个</span>
<span>第二个</span>
<span>第三个</span>
<p class="active">第一个文本</p>
<p>第二个文本</p>
<p>第三个文本</p>
</div>
</body>
</html>
<script>
var oSpan = document.getElementsByTagName("span");// 获取dom对象
var oP = document.getElementsByTagName("p");// 获取dom对象

for(var i = 0;i<oSpan.length;i++){//因为要点击所有的span元素，所以要拿到所有的span，所以要循环；

oSpan[i].index = i;

//因为onclick监听事件点击span对应的p元素也会发生相应的变化，这就会用到索引，因为在onclick里边访问i是3，所以我们在外边自定义一个属性将索引保存并找到对应的关系ss；oP[this.index].className = "active";

oSpan[i].onclick = function(){//span绑定点击事件(onclick是span的一个属性，所以用用.属性给属性赋值

for(var j = 0;j<oSpan.length;j++){

//为什么还要for循环；因为点击事件发生之前外边的for循环已经循环完毕，onclick里边访问到的是循环后的i == 3；属于异步处理：一个事物处理完毕以后才处理下一个事物；我们在给点击的加class之前，先全部清空；

oSpan[j].className = "";
oP[j].className = "";
}
this.className = "active"; //事件监听处理程序中，this 就是指当前事件监听的对象；
oP[this.index].className = "active";
//oSpan[0].index = 0;oSpan[1].index = 1;oSpan[2].index = 2;所以this.index = i;i的值就是this的索引值；
}
}
//我们一个完整事件分为事件监听和事件的触发两个过程
// 我们的dom0级事件属性，是绑定在我们的dom对象的上私有属性;
// 因为他是一个属性，所以我们一个DOM0级事件只能赋值一个处理方法

</script>

阅读全文

0 0