《 Css implementation tab tab selects marked code 》

There are also some drawbacks. Sites with a small amount of data can consider using it.

Front end tab tab.webp

 <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="author" content="weich.ee"> <title>tab tab</title> <style type="text/css"> .test_box { width: 50%; min-height: 250px; margin: 1em auto; position: relative; } .test_tab { width: 25%; margin-right: -1px; border: 1px solid #ccc; border-bottom: 0; float: left; } .test_label { display: block; padding-top: 5px; padding-bottom: 5px; background-color: #eee; text-align: center; } .test_radio, .test_tab_content { position: absolute; left: -999em; } .test_radio:checked~.test_tab_content { margin-top: -1px; padding: 1em 2em; border: 1px solid #ccc; left: 0; right: 0; } .test_radio:checked~.test_label { background-color: #fff; border-bottom: 1px solid #fff; position: relative; z-index: 1; } /*The second way*/ /*     .tabs { position: relative; min-height: 200px; clear: both; margin: 25px 0; } .tab { float: left; } .tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; left: 0px; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; } [type=radio]:checked~label { background: white; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked~label~.content { z-index: 1; } */ </style> </head> <body> <div class="test_box"> <div class="test_tab"> <input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked" /> <label class="test_label" for="testTabRadio1">Tab 1</label> <div class="test_tab_content"> <p>I am Tab 1</p> </div> </div> <div class="test_tab"> <input type="radio" id="testTabRadio2" class="test_radio" name="tab" /> <label class="test_label" for="testTabRadio2">Tab 2</label> <div class="test_tab_content"> <p>I am Tab 2</p> </div> </div> <div class="test_tab"> <input type="radio" id="testTabRadio3" class="test_radio" name="tab" /> <label class="test_label" for="testTabRadio3">Tab 3</label> <div class="test_tab_content"> <p>I am Tab 3</p> </div> </div> </div> <!--  Another way --> <!-- < div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tabsonly"> <label for="">one</label> <div class="content"> one </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tabsonly" checked> <label for="">two</label> <div class="content"> two </div> </div> </div> --> </body> </html>