Home > Article > Web Front-end > Example of simple label click switching function implemented in JS
Example of simple label click switching function implemented in JS
- 韦小宝Original
- 2018-01-15 11:19:021279browse
This article mainly introduces the simple label click switching function implemented by JS, involving javascript events response and page element traversal, attribute dynamic transformation and other related operation skills. Friends who are interested in js can refer to the following This article
The example of this article describes the simple label click switching function implemented by JS. Share it with everyone for your reference, the details are as follows:
The specific code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.jb51.net 脚本之家</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: yellowgreen;
}
.bd li {
height: 255px;
background-color: yellowgreen;
display: none;
}
.bd li.current {
display: block;
font-size: 36px;
}
</style>
</head>
<body>
<p class="box" id="box">
<p class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</p>
<p class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</p>
</p>
<script>
var box = document.getElementById("box");
var spans = box.getElementsByTagName("span");
var lis = box.getElementsByTagName("li");
for (var i = 0; i < spans.length; i++) {
spans[i].aaa = i;
spans[i].onclick = function () {
for (var i = 0; i < spans.length; i++) {
spans[i].className = "";
lis[i].className = "";
}
this.className = "current";
lis[this.aaa].className = "current";
}
}
</script>
</body>
</html>The above is all the content of this article! ! Hope it helps everyone learn! !
Related recommendations:
Javascript uses rem to do responsive development example sharing
A brief discussion on the difference between Ajax and JavaScript
Javascript converts the absolute path of the image to base64 encoding
The above is the detailed content of Example of simple label click switching function implemented in JS. For more information, please follow other related articles on the PHP Chinese website!