Heim > Artikel > Web-Frontend > Implementierung des Tab-Wechseleffekts basierend auf JavaScript
Implementierung des Tab-Wechseleffekts basierend auf JavaScript
- 高洛峰Original
- 2016-12-05 13:56:121101Durchsuche
Das Beispiel in diesem Artikel teilt den spezifischen Code für die Android-Neun-Quadrat-Bildanzeige als Referenz. Der spezifische Inhalt lautet wie folgt:
<!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 () {
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> Das Obige ist der gesamte Inhalt des Artikels, ich hoffe, er wird für das Studium aller hilfreich sein
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn