【jQuery】Tab选项卡(li之间的切换)
2017-02-09 10:02
417 查看
演示地址:暂未开放,请前往在线代码测试网
测试代码如下:固定格式在这里就省略了,如果有问题大家可以自行调整。
No.1 jQuery版
<html> <head> <style> /*网点、取件、咨询信息*/ .titTabs { width: auto; margin: 0 auto; margin-top: 5px } .titTabs .titTab { height: 37px; font-size: 14px; border-bottom: 1px #e1e1e1 solid } .titTabs .titTab li { float: left; height: 36px; line-height: 36px; padding: 0 25px; margin-right: 5px; background: #f0f0f0; border-top: 1px #e1e1e1 solid; border-left: 1px #e1e1e1 solid; border-right: 1px #e1e1e1 solid; } .titTabs .titTab li:hover { height: 37px; background: #f0f0f0; color: #fff; cursor: pointer } .titTabs .active { height: 37px !important; background: #f18200 !important; color: #fff } .titTabs .titInfo { background: #fff; border-bottom: 1px #e1e1e1 solid; border-left: 1px #e1e1e1 solid; border-right: 1px #e1e1e1 solid; } .titTabs .titInfo div { display: none } .titTabs .titInfo th,.titTabs .titInfo td { border-bottom: 1px solid #ddd; padding-left: 20px } .titTabs .titInfo .on { display: block } .tit01,.tit02,.tit03 { font-size: 12px; color: #000; } .tit01 li,.tit02 li,.tit03 li { line-height: 36px; } </style> </head> <body> <div class="titTabs"> <ul class="titTab"> <li class="active"> <i></i> <span>网点</span> </li> <li> <i class="take"></i> <span>取件</span> </li> <li> <i class="ask"></i> <span>咨询信息</span> </li> </ul> <div class="titInfo"> <div class="on"> <ul class="tit01"> <li> <table> <thead> <tr> <th style="width: 480px">网点名称</th> <th style="width: 250px">营业时间</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">深圳市1604</td> <td style="text-align: left">2017-1-12 09:00</td> </tr> <tr> <td style="text-align: left">深圳市1604</td> <td style="text-align: left">2017-1-12 09:00</td> </tr> </tbody> </table> </li> </ul> </div> <div> <ul class="tit02"> <li> <table> <thead> <tr> <th style="width: 480px">取件要求</th> <th style="width: 250px">取件时间</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">本人必须亲自到场,不接受代领!</td> <td style="text-align: left">2017-1-12 09:25</td> </tr> <tr> <td style="text-align: left">本人必须亲自到场,不接受代领!</td> <td style="text-align: left">2017-1-12 09:25</td> </tr> </tbody> </table> </li> </ul> </div> <div> <ul class="tit03"> <li> <table> <thead> <tr> <th style="width: 480px">公司名称</th> <th style="width: 250px">联系电话</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">深圳市有限公司</td> <td style="text-align: left">0755-8888888</td> </tr> <tr> <td style="text-align: left">深圳市有限公司</td> <td style="text-align: left">0755-8888888</td> </tr> </tbody> </table> </li> </ul> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(e) { $(".titTab li").click(function(){ $(".titTab li").eq($(this).index()).addClass("active").siblings().removeClass("active"); $(".titInfo div").hide().eq($(this).index()).show(); }); }); </script> </body> </html>
No.2 原生js版:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width:312px; border:2px red solid; margin: 0 auto; } ul{ overflow: hidden; } li{ list-style: none; background:red; float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; border: 2px solid orange; } li.on{ background: green; border-bottom: none;/*让该卡头的下边框为“none”*/ height: 32px;/*卡头的内容高度设置为:原内容的高度+卡头下边框的宽度。*/ } .box div{ background:green; display: none; width: 312px; height: 200px; font-size: 30px; border-top: none;/*在开始写样式时,就把展示区上边框设置成“none”*/ } .box div.on{ display: block; } </style> </head> <body> <div class="box" id="box"> <ul> <li class="">中国</li> <li>日本</li> <li>韩国</li> </ul> <div class="on">中国是老大</div> <div>日本是老二</div> <div>韩国是老三</div> </div> <script> var box = document.getElementById('box'); var lis = box.getElementsByTagName('li'); var divs = box.getElementsByTagName('div'); for(var i=0;i<lis.length;i++){ lis[i].qiancheng = i; lis[i].onclick = function(){ for(var j=0;j<lis.length;j++){ lis[j].className = ''; divs[j].className = ''; } this.className = 'on'; divs[this.qiancheng].className = 'on'; } } </script> </body> </html>
No.3 纯CSS3版:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none } body { background: #ccc } .main { position: relative; margin: 50px auto; width: 300px; height: 150px; color: #fff } .main input { display: none } .main label { display: block; height: 24px; cursor: pointer; text-align: center; } .main li { float: left; margin-right: 3px; width: 50px; height: 24px; background: #eee; line-height: 24px } .main div { position: absolute; top: 24px; left: 0; display: none; width: 300px; height: 126px; padding: 10px; } .main div,.main input:checked~label { background: #999 } .main input:checked~div { display: block } </style> </head> <body> <div class="main"> <ul> <li> <input type="radio" name="tabs" id="tab1" checked> <label for="tab1">语文</label> <div>床前明月光</div> </li> <li> <input type="radio" name="tabs" id="tab2"> <label for="tab2">数学</label> <div>疑是地上霜</div> </li> <li> <input type="radio" name="tabs" id="tab3"> <label for="tab3">英语</label> <div>举头望明月</div> </li> <li> <input type="radio" name="tabs" id="tab4"> <label for="tab4">政治</label> <div>低头思故乡</div> </li> </ul> </div> </body> </html>
相关文章推荐
- Jquery tab 选项卡 无刷新切换[带演示]
- jQuery 制作的Tab标签切换选项卡
- jQuery实现TAB选项卡切换特效简单演示
- jQuery简单实现tab选项卡切换效果
- Jquery tab 选项卡 无刷新切换[带演示]
- jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
- jquery编写Tab选项卡滚动导航切换特效
- jQuery实现Tab选项卡切换效果简单演示
- jquery实现tab标签选项卡自动切换效果
- jQuery实现滚动切换的tab选项卡效果代码
- jquery实现的非常简单实用带有渐变切换效果的tab选项卡
- jquery编写Tab选项卡滚动导航切换特效
- Jquery tab 选项卡 无刷新切换[带演示]
- jquery制作的tab标签切换选项卡
- jQuery Tab选项卡切换代码
- jQuery实现Tab,滑动门,选项卡,图片切换
- jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
- 超好用的简单的jquery tab选项卡切换代码(点击切换和导航栏滑过)
- jQuery实现TAB选项卡切换特效简单演示
- jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结