【jQuery】Tab选项卡（li之间的切换）

2019-11-02 18:27:41

字体：大中小

来源：转载

供稿：网友

这里写图片描述演示地址：暂未开放，请前往在线代码测试网 HTML代码如下：固定格式在这里就省略了

<html> <head></head> <body> <div class="titTabs" style="display: none"> <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> <th style="width: 250px">网点电话</th> <th style="width: 180px">国家</th> <th style="width: 180px">省</th> <th style="width: 180px">城市</th> <th style="width: 300px">其他说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">深圳市1604</td> <td style="text-align: left">2017-1-12 09:00</td> <td style="text-align: left">0755-8376566</td> <td style="text-align: left">中国</td> <td style="text-align: left">湖南</td> <td style="text-align: left">长沙</td> <td style="text-align: left">备注</td> </tr> <tr> <td style="text-align: left">深圳市1604</td> <td style="text-align: left">2017-1-12 09:00</td> <td style="text-align: left">0755-8376566</td> <td style="text-align: left">中国</td> <td style="text-align: left">湖南</td> <td style="text-align: left">长沙</td> <td style="text-align: left">备注</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> <th style="width: 250px">取件电话</th> <th style="width: 180px">国家</th> <th style="width: 180px">省</th> <th style="width: 180px">城市</th> <th style="width: 300px">其他说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">本人必须亲自到场，不接受代领！</td> <td style="text-align: left">2017-1-12 09:25</td> <td style="text-align: left">0755-8376566</td> <td style="text-align: left">中国</td> <td style="text-align: left">湖南</td> <td style="text-align: left">长沙</td> <td style="text-align: left">备注</td> </tr> <tr> <td style="text-align: left">本人必须亲自到场，不接受代领！</td> <td style="text-align: left">2017-1-12 09:25</td> <td style="text-align: left">0755-8376566</td> <td style="text-align: left">中国</td> <td style="text-align: left">湖南</td> <td style="text-align: left">长沙</td> <td style="text-align: left">备注</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> <th style="width: 408px">备注</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">深圳市有限公司</td> <td style="text-align: left">0755-8888888</td> <td style="text-align: left">欢迎您前来咨询！</td> </tr> <tr> <td style="text-align: left">深圳市有限公司</td> <td style="text-align: left">0755-8888888</td> <td style="text-align: left">欢迎您前来咨询！</td> </tr> </tbody> </table> </li> </ul> </div> </div> </div> </body></html>

CSS代码如下：

/*网点、取件、咨询信息*/.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;}

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(); });});

简单版：

<!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>

上一篇：深入理解javascript原型和闭包（8）——简述【执行上下文】上

下一篇：Unicode 字符编码表|汉字Unicode编码的区间为：0x4E00→0x9FA5(转)