The examples in this article share the specific code for the js tab switching effect for your reference. The specific content is as follows
Implementation ideas:
1. First get the id element.
2. Add onclick event to loop through button elements.
3. Exclusive idea. When clicking a button, set all tabs to empty button styles, and use this keyword to specify the current tab to get the highlighted style.
4. The following multiple div content blocks and so on.
source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple tab switch（ImitationHao123navigation）</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 278px;
margin: 0 auto;
margin-top: 100px;
background-color: #F7F7F8;
overflow: hidden;
}
.btn button {
outline:none;
color: #616161;
font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
border: none;
height: 34px;
width: 51px;
background-color: #F7F7F8;
float: left;
cursor: pointer;
}
.box .btn i {
height: 16px;
border-left: 1px solid #EAEAEA;
margin-top: 9px;
float: left;
_font-size: 0px;
}
.box .btn button:hover {
color: #0AA770;
}
.box .btn s {
cursor: pointer;
text-decoration: none;
font:14px/34px arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
}
#box1 #btns .clickbtn {
border-top: 1px solid #0AA770;
color: #0AA770;
}
.bottom {
display: none;
position: absolute;
width: 278px;
height: 110px;
color: #fff;
text-align: center;
font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
}
.bottom a {
color: #fff;
position: relative;
top: -20px;
left: 0px;
text-decoration: none;
}
.bottom a:hover {
text-decoration: underline;
}
</style>
<script>
= function(){
var btns = ("btns").getElementsByTagName("button");
var divs = ("bottomdivs").getElementsByTagName("div");
btns[0].className = "clickbtn";
for(var i = 0;i<;i++){
btns[i].index = i;
btns[i].onclick = function(){
//alert();
for(var j = 0;j<;j++){
btns[j].className = "";
}
= "clickbtn";
for(var b = 0;b<;b++){
divs[b]. = "none";
}
divs[]. = "block";
}
}
}
</script>
<body>
<div class="box" >
<div class="btn" >
<button>Recommended</button>
<i></i>
<button>society</button>
<i></i>
<button>entertainment</button>
<i></i>
<button>military</button>
<i></i>
<button>physical education</button>
<s>+</s>
</div>
<div >
<div class="bottom" style="display: block">
<img src="images/" alt="">
<h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The young man encountered a "haunted" incident during live broadcast. The whole process was filmed</a></h4> </div>
<div class="bottom">
<img src="images/" alt="">
<h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Man wearing groom's outfit and carrying inflatable doll parades</a></h4> </div>
<div class="bottom">
<img src="images/" alt="">
<h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >She satisfies everyone's fantasy of talented women</a></h4> </div>
<div class="bottom">
<img src="images/" alt="">
<h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Wang Yi responds to whether China and the United States will have conflicts in the South China Sea</a></h4> </div>
<div class="bottom">
<img src="images/" alt="">
<h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Liu Xiang showed his love with his beautiful wife. The license plate of the luxury car was exposed to be too eye-catching</a></h4> </div>
</div>
</div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.