describe
When the tab bar is clicked, the tab bar is switched and the corresponding content area is displayed, for example, there are a, b, and c in the tab bar. When a is clicked, the content part displays the content corresponding to a, and when b is clicked, the content part displays the content corresponding to b.
train of thought
First, let’s talk about the layout division of html, divide the whole into the tab part of the head, and the content part at the bottom; the first one is displayed by default, and the rest of the content is hidden. When one of the tabs is clicked, the corresponding content is displayed; Then add a custom attribute type to a, b, and c in the tab. The attribute name here can be chosen at will, and the attribute value starts from 0 and goes to the back row, and then add a click event to a, b, and c in the tab. In the click event, get the value of the custom attribute type of the currently clicked Tab, get all content tags, hide all content tags through exclusive thinking, and then display the content part of the current type subscript.
code display
Explanation: tab_item is equivalent to the a, b, and c mentioned above;
set the same class name register_box for all content parts;
the actuve class is used to control the style displayed after the tab is clicked.
none This class is used to control the display and hiding of elements.