Tabs are often used on web pages. To put it bluntly, click on an option, and the content in this option will pop up below.
Method 1:
Methods can be implemented using simple code, and the following is all the code;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 600px;background: #ccc;margin: 0 auto;}
li{list-style: none;}
#ul1{display: block; width: 100%;overflow: hidden;}
#ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
#content{width: 100%;margin-top: 20px;}
#content div{display: none;}
#content {display: block;}
.show{background: red;}
</style>
</head>
<body>
<div >
<ul >
<li>front page</li>
<li>product</li>
<li>news</li>
<li>connect</li>
<li>mine</li>
</ul>
<div >
<div class="active">
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</div>
<div>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</div>
<div>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</div>
<div>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</div>
<div>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
=function(){
var oli=("ul1").getElementsByTagName("li");
//alert();
var odiv=("content").getElementsByTagName("div");
//alert()
for(var i=0;i<;i++){
oli[i]._index=i;
oli[i].onclick=function(){
//alert(i);
for(i=0;i<;i++){
oli[i].className='';
odiv[i].='none';
}
='show';
odiv[this._index].='block';
}
}
}
</script>
</body>
</html>
First we define the content in the web page tab in the HTML section.
<div >
<ul ><!--Click section in the tab-->
<li>front page</li>
<li>product</li>
<li>news</li>
<li>connect</li>
<li>mine</li>
</ul>
<div >
<div class="active"><!--The section to be displayed and displayed in the tab-->
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</div>
<div>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</div>
<div>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</div>
<div>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</div>
<div>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</div>
</div>
</div>
The CSS part modifies the content in HTML:
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 600px;background: #ccc;margin: 0 auto;}
li{list-style: none;}
#ul1{display: block; width: 100%;overflow: hidden;}
#ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
#content{width: 100%;margin-top: 20px;}
#content div{display: none;}
#content {display: block;}
.show{background: red;}
</style>
Finally, the most important part of js:
<script type="text/javascript">
=function(){
var oli=("ul1").getElementsByTagName("li");
//alert();
var odiv=("content").getElementsByTagName("div");//Extract elements in HTML //alert()
for(var i=0;i<;i++){
oli[i]._index=i;
oli[i].onclick=function(){
//alert(i);
for(i=0;i<;i++){
oli[i].className='';
odiv[i].='none';
}
='show';
odiv[this._index].='block';
}
}
}
</script>
The first for loop in the JS statement is to get the clicked parts in all tabs; because the I variable is not accessible in the event function below, the i variable loops to the value every time it clicks. Therefore, the value of i is handed over to a custom element attribute to save the value of i in the loop for use below. That is: oli[i]._index=i;
After adding the click function, the second for loop is to change the className of all oli to "empty" and the style of all odivs is displayed='none'; after the loop is finished, add className to the currently clicked oli and the style of the corresponding odiv below is displayed='block';
Here are the results of the run:
When writing a program, you must pay attention to the click part in the tab. The number of li (in JS) should be the same as the number of divs contained in the div with the ID content below (in JS). When I was writing a program, the program reported an error because it was not equal, but the error could not be found for a long time; in short, you should be more careful.
Method 2:
Method 1 is suitable for situations where there are fewer tabs, but if there are more tab contents, we need to use this method. The second method is applied to a more important knowledge point in JS that our teacher talked about this week: self-running functions
(function a(){
//The contents of the function })(parameter);
Define the function a(); put brackets on the entire function, followed by brackets as input parameters;
The following is the program for self-running function of Method Two:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MultipletabTab</title>
<script>
= function() {
tab("tabMain", "click");
tab("tabMain1", "click");
tab("tabMain2", "click");
tab("tabMain4", "click");
function tab(id, event) {
var oDiv = (id);
var oBtn = ("li");
var oBox = ("div");
for(var i = 0; i < ; i++) {
//(i)
(function(index) {//The function is executed oBtn[index].addEventListener(event, function() {
for(var i = 0; i < ; i++) {
oBtn[i].className = '';
oBox[i].className = 'tabSide';
}
= 'active';
oBox[index].className = 'active';
});//Add event listening })(i)
}
}
}
</script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.tabMenu {
width: 300px;
margin: 50px auto 0 auto;
}
.tabMenu ul {
display: block;
overflow: hidden;
width: 300px;
height: 40px;
background: #eee;
}
.tabMenu ul li {
cursor: pointer;
display: block;
float: left;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.tabMenu ul {
background: #f00;
color: #fff;
}
.tabMenu .tabSide {
display: none;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
.tabMenu {
display: block;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
</style>
</head>
<body>
<div class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">content1</div>
<div class="tabSide">content2</div>
<div class="tabSide">content3</div>
</div>
<div class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">content1</div>
<div class="tabSide">content2</div>
<div class="tabSide">content3</div>
</div>
<div class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">content1</div>
<div class="tabSide">content2</div>
<div class="tabSide">content3</div>
</div>
<div class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">content1</div>
<div class="tabSide">content2</div>
<div class="tabSide">content3</div>
</div>
</body>
</html>
Similar to the method, write the content in HTML first. The CSS part modifies the HTML, let’s look at the JS part directly;
<script>
= function() {
tab("tabMain", "click");
tab("tabMain1", "click");
tab("tabMain2", "click");
tab("tabMain4", "click");
function tab(id, event) {
var oDiv = (id);
var oBtn = ("li");
var oBox = ("div");
for(var i = 0; i < ; i++) {
//alert(i)；
(function(index) {//The function is executed oBtn[index].addEventListener(event, function() {
for(var i = 0; i < ; i++) {
oBtn[i].className = '';
oBox[i].className = 'tabSide';
}
= 'active';
oBox[index].className = 'active';
});//Add event listening })(i)
}
}
}
</script>
Complete multiple tabs by adding events and self-running functions.