JavaScript implementation of Tab click switching example code sharing (picture and text)

Tab tab switching effects are widely used in today’s web pages, including click switching, sliding switching, delayed switching, automatic switching and other effects. In this blog post, we use nativeJavaScript To achieve the effect of Tab click switching.

Tab tab switching effects are widely used in today’s web pages, including click switching, sliding switching, delayed switching, automatic switching and other effects. In this blog post, we are Realize the effect of Tab click switching through native Javascript

1. Function implementation

html Part

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p style="display:block;">第一个Nian糕</p>
<p>第二个Nian糕</p>
<p>第三个Nian糕</p>

css Part

p {
 display: none;
 width: 155px;
 height: 100px;
 border: 1px solid #000;
}

Next is the JS part, which is converted into code according to the function to be achieved at each step. Whenever we want to achieve an effect, Don't rush to type the code first, but first think about how to implement it, what the structure is like, what events are needed for a certain function, etc., and go through the whole process in your mind. Then convert the logic of each step into code

a. Get the elements

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

Comments: document.getElementsByTagName returns a [class Array object], you can use array methods to process it, but array-like objects do not have the methods that arrays have

b. Bind click events to elements

//第一个按钮的点击事件
btnList[0].onclick = function () {
 btnList[0].style.color = "#fff";
 btnList[0].style.backgroundColor = "#f60";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";
 pList[0].style.display = "block";    
 pList[1].style.display = "none";    
 pList[2].style.display = "none";    
}

//第二个按钮的点击事件
btnList[1].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "#fff";
 btnList[1].style.backgroundColor = "#f60";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";  
 pList[0].style.display = "none";    
 pList[1].style.display = "block";    
}

//第三个按钮的点击事件
btnList[2].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "#fff";
 btnList[2].style.backgroundColor = "#f60";
 pList[0].style.display = "none";    
 pList[1].style.display = "none";    
 pList[2].style.display = "block";  
}

Now we have implemented a Tab switching effect, let’s take a look at the effect

Although it is very simple, it has achieved the effect we want. , readers can set the CSS according to the style they want. The next thing we have to do is to optimize the JS code

2. Optimization

a. Get the element

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

b. Bind the click event to each button element

for(var i = 0; i < btnList.length; i++ ) {
 btnList[i].index = i; //给每个按钮添加index属性，标记是第几个按钮
 btnList[i].onclick = function() {
  for(var j = 0; j < btnList.length; j++) {
   //将所有的按钮样式去掉，块隐藏
   btnList[j].style.color = "";
   btnList[j].style.backgroundColor = "";
   pList[j].style.display = "none";
  }
  //给点击的按钮添加样式，对应的块显示
  this.style.color = "#fff";
  this.style.backgroundColor = "#f60";
  pList[this.index].style.display = "block";
 }
}

index returns the character position, which is searched by The starting position of the first successful match in the string, starting from zero

this is a keyword of Javascript, which represents the function runtime, An automatically generated internal object, this can only be used inside the function. The value of this will change with the different usage scenarios of the function, but we only need to remember one principle, this Refers to the object that calls the function

Here this points to the corresponding click button. We can see the content output by this through console printing

3. Let command

has been added in ES 6let command, used to declare Variable , its usage is similar to var, but the declared variable is only valid within the code block where the let command is located

var and let in the code block, and then print this inside and outside the code block For the two variables, you can see that the variable declared by var returns the correct value and is printed inside the code block. The variable declared by let returns the correct value and is printed outside the code block. let The declared variable reports an error, which shows that let The declared variable is only valid in the code block in which it is located

i is declared by var and is valid in the global scope, so there is only one global variable i, every time loops , the value of the variable i will change, and the function assigned to the array a within the loop is When running, the same variable i will be read through the closure, causing the final output to be the value of the last round of i, which is 10, and if is used let, the declared variable is only valid within the block-level scope, and the final output is 6

a. Get the element

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

b. Give Each button element is bound to a click event

for(let i = 0; i < btnLists.length; i++) {
 btnLists[i].onclick = function() {
  for(var j = 0;j < btnLists.length;j++){
   btnLists[j].style.color="";
   btnLists[j].style.backgroundColor="";
   pLists[j].style.display="none";
  }
  this.style.color = "yellow";
  this.style.backgroundColor="#f60";
  pLists[i].style.display="block";
 }
}

End of File

It is inevitable that errors or inadequacies will appear in the writing process. I hope everyone can correct me. In order not to mislead more people, I also hope that everyone will support Script House.

The above is the detailed content of JavaScript implementation of Tab click switching example code sharing (picture and text). For more information, please follow other related articles on the PHP Chinese website!