Another method (input method) : Pure CSS TAB toggle (input[type=radio])

The effect

1, the core

The width and height of each item [switching content] is the width and height of the [content display area], and the [content display area] setting exceeds part of the hidden, each time after the anchor point positioning, the other [switching content] parts will be squeezed out of the [content display area] and hidden, so as to achieve the effect of TAB switching.

2, pay attention to

This method has no TAB color enabled by default. If anyone thinks of a method, please point it out in the comments section.

3. CSS code

/* * width: 50vw; / /. Tab-box {width: 50vw; height: 50vh; margin: 0 auto; border: 1px solid #f0f; border-radius: 5px; overflow: hidden; } /* ul uses flex layout to make li full */. TAB -nav {width: 100%; height: 60px; padding: 0; margin: 0; list-style: none; display: flex; } /* nav li {flex: 1; /* nav li {flex: 1; height: 60px; text-align: center; background: cornflowerblue; } /* tab-tit {display: block; width: 100%; height: 100%; line-height: 60px; cursor: pointer; text-decoration: none; color: #000; } /* * hover :hover {background: #f0f; color: #fff; }.tab-content {height: calc(100%-60px);}.tab-content {height: calc(100%-60px); overflow: hidden; } */.tab-content div {text-align: left; height: 100%; text-indent: 2em; padding: 10px; box-sizing: border-box; }Copy the code

4. HTML code

< div class = "TAB - box" > < ul class = "TAB - nav" > < li > < a class = "TAB - tit" href = "# active1" > item 1 < / a > < / li > < li > < a class = "TAB - the tit." " Href = "# active2" > 2 < / a > < / li > < li > < a class = "TAB - tit" href = "# active3" > 3 < / a > < / li > < li > < a class = "TAB - the tit." " Href ="#active4"> </a></li> </ul> <div class="tab-content"> <div class="tab-content" id="active1" Class ="tab-content" id="active2"> 2</div> <div class=" active3"> 3</div> <div class="tab-content" Id ="active4"> Content 4</div> </div> </div>Copy the code

Here is another way to implement pure CSS TAB switch another way (input method) : pure CSS TAB switch (input[type=radio])