【jQuery】Tab選項卡（li之間的切換）

2024-04-27 15:16:32

字體：大中小

來源：轉載

供稿：網友

這里寫圖片描述演示地址：暫未開放，請前往在線代碼測試網 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>

上一篇：webpack-dev-server簡單使用

下一篇：Unicode 字符編碼表|漢字Unicode編碼的區間為：0x4E00→0x9FA5(轉)