Use JavaScript to implement Tab-click switching instance code sharing

The Tab switch effect is widely used in today's web pages, including click switch, sliding switch, latency switch, and automatic switch. In this blog, we use native JavaScript to implement the Tab click switch effect. The Tab switch effect is widely used in today's web pages, including click switch, sliding switch, latency switch, and automatic switch. In this blog, we use native JavaScript to implement the Tab click switch effect.

The Tab switch effect is widely used in today's web pages, including click switch, sliding switch, latency switch, and automatic switch. In this blog, we use native Javascript to implement Tab click switching.

1. function implementation

html Part

Button 1Button 2Button 3
First Nian cake
Second Nian cake
Third Nian cake

cssPart

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

Next is the JS part, which converts the functions to be implemented in each step into code. Whenever we want to implement an effect, do not rush to knock on the code, instead, you should first think about how to implement, what the structure is, what events a function needs, and so on, and repeat the entire process in your mind, then convert the logic of each step into code.

A. Get Elements

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

Note:document.getElementsByTagNameThe returned result is a [class array object], which can be processed using an array, but the class array object does not have the array method.

B. Bind a click event to the element

// Click the event btnList [0] For the first button. 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 ";}

// Click the event btnList [1] For the second button. 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 ";}

// Click the event btnList of the third button [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 switch effect. Let's take a look at the effect.

Although it is simple, it has achieved the desired effect. You can set CSS based on the style you want. Next, we need to optimize the JS Code.

2. Optimization

A. Get Elements

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

B. Bind a click event to each button element.

For (var I = 0; I <btnList. length; I ++) {btnList [I]. index = I; // Add the index attribute to each button, marking the number of buttons btnList [I]. onclick = function () {for (var j = 0; j <btnList. length; j ++) {// remove all button styles and hide btnList [j]. style. color = ""; btnList [j]. style. backgroundColor = ""; pList [j]. style. display = "none";} // Add a style to the clicked button. The corresponding block displays this. style. color = "# fff"; this. style. backgroundColor = "# f60"; pList [this. index]. style. display = "block ";}}

Index returns the character position, which is the first position in the string to be searched for a successful match, starting from scratch.

This is a Javascript keyword. It indicates an internal object automatically generated during function running. this can only be used inside the function. For the value of this, it will change according to different function usage scenarios, 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 print it on the console to see the content output by this.

In the above Code, the variablei YesvarDeclared to be valid globally, so there is only one global variable. i, Every cycle, variable iWill change, and the loop is assigned to the array a Offunction At runtime, the same variable is read through the closure.i, Resulting in the final output of the last round iValue, that is, 10. letThe declared variables are only valid within the block-level scope, and the final output is 6

A. Get Elements

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

B. Bind a click event to each button element.

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"; }}

Similarly, we use the console to print the I value.

End of File

It is inevitable that errors or mistakes may occur during the writing process. I hope you can correct them so as not to mislead more people, but also hope you can support your feet.

The above is the details about the code sharing (image and text) for the switch instance by clicking the Tab in JavaScript. For more information, see other related articles in the first PHP community!