代码最少的选项卡,选中修改样式,切换到当前的界面。
偶实现的功能:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="base.css" /> <script type="text/javascript" src="jquery-1.10.1.min.js" ></script> </head> <body> <style> .t-tabs{ width: 240px; margin: 20px auto 0 auto;} .t-tabs>ul{ height: 30px;} .t-tabs>ul>li{ width: 80px; text-align: center; line-height: 2; height: 30px; float: left;} .t-tabs>ul>.hover{ font-weight: bold;} .t-tabs>ul>li>a{ color: #fff;} .m-tabs-cont>div{ width: 240px; height: 80px; display: none;} .m-tabs-cont>.current{ display: block;} .m-tabs-cont>div>p{ color: #fff; text-align: center; padding-top: 20px;} .t-tabs>ul>li:nth-child(1), .m-tabs-cont>div:nth-child(1){ background-color: #06f;} .t-tabs>ul>li:nth-child(2), .m-tabs-cont>div:nth-child(2){ background-color: #f60;} .t-tabs>ul>li:nth-child(3), .m-tabs-cont>div:nth-child(3){ background-color: #c00;} </style> <div class="t-tabs" id="tabs"> <ul> <li class="hover"><a href="###">111</a></li> <li><a href="###">222</a></li> <li><a href="###">333</a></li> </ul> <div class="m-tabs-cont" id="tabscont"> <div class="current"><p>cont111</p></div> <div><p>cont222</p></div> <div><p>cont333</p></div> </div> </div> <script> $(function() { tabs(); }); function tabs(){ $('#tabs ul li').mouseover(function(){ $('#tabs ul li').eq($(this).index()).addClass('hover').siblings().removeClass('hover'); $('#tabscont div').eq($(this).index()).addClass('current').siblings().removeClass('current'); }); } </script> </body> </html>
效果图:
结果群友(贾顺名)提出一个纯CSS的解决方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>纯CSS实现tab选项卡切换</title> <style media="screen"> * { box-sizing: border-box; } body { margin: 0; background-color: #2DB7F5; color: #08172F; position: absolute; height: 100%; width: 100%; overflow: hidden; } input[name='toggle'] { display: none; } nav { margin-top: 20px; } nav ul { position: relative; padding: 0; margin: 0; list-style: none; font-size: 0; } nav ul { height: 40px; line-height: 40px; text-align: center; } nav ul li { display: inline-block; width: 33.33%; height: 100%; font-size: 14px; } nav ul li label { display: inline-block; width: 100%; height: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #1F5AA3; color: #fff; } main { position: absolute; height: 200px; width: 100%; background: white; color: #1F5AA3; padding: 10px } .container { display: none; } #tab1:checked~nav label[for='tab1'] { background-color: #fff; color: #1F5AA3; } #tab1:checked~main .tab1-container { display: block; } #tab2:checked~nav label[for='tab2'] { background-color: #fff; color: #1F5AA3; } #tab2:checked~main .tab2-container { display: block; } #tab3:checked~nav label[for='tab3'] { background-color: #fff; color: #1F5AA3; } #tab3:checked~main .tab3-container { display: block; } </style> </head> <body> <input type="radio" name="toggle" id="tab1" checked/> <input type="radio" name="toggle" id="tab2" /> <input type="radio" name="toggle" id="tab3" /> <nav> <ul> <li><label for="tab1">tab1</label></li> <li><label for="tab2">tab2</label></li> <li><label for="tab3">tab3</label></li> </ul> </nav> <main> <section class="container tab1-container"> <p>这里是第一个tab页的内容</p> </section> <section class="container tab2-container"> <p>这里是第二个tab页的内容</p> </section> <section class="container tab3-container"> <p>这里是第三个tab页的内容</p> </section> </main> </body> </html>
效果图: