Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve Tab column switching effects in JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Show the running effect:

As shown in the image above, just click on the Tab bar at the top and the style of the Tab bar itself will be modified, and then the content block below it will also display the corresponding content. Such effects and functions are widely used in the front end, so it can be said that the front end will be. Without saying much, let's start with the code:

(the CSS style code will not be used here. You can set it according to your needs. Just use float layout for li.)

The structure of HTML:

Commodity introduction specification and packaging after-sale guarantee commodity evaluation (50000) Mobile phone community commodity introduction module content specification and packaging module Content commodity evaluation of after-sale guarantee module (50000) module content mobile community module content

Here is the JS code:

/ / Business requirements: the tab bar clicked on the tab column has a different style, and the div below it also needs to switch with the click to achieve the effect of changing the content var tab_list = document.querySelector (".tab _ list"); var lis = tab_list.querySelectorAll ("li"); var tabs = document.querySelectorAll (".item"); for (var I = 0; I < lis.length) Li +) {lisl [I] .setAttribute ("data-index", I); / / add a custom attribute of data-index to each div, whose value is their own subscript in lis. This value mainly allows us to determine which li we are currently clicking on so as to help us later modify the displayvalue lis.onclick = function () of its corresponding div. The first step is to use the exclusive thought to assign the class attribute to the user who clicks first. Note that other unclicked ones need to operate that their class value is empty, which is to kill others and leave my own exclusive thought for (var I = 0; I).

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.