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

最新推荐文章于 2022-05-08 20:03:55 发布

邹大叔

最新推荐文章于 2022-05-08 20:03:55 发布

阅读量9.1k

点赞数

分类专栏： jQuery 原创文章标签： jquery html

本文链接：https://blog.csdn.net/zuncle/article/details/54944116

版权

原创同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

这里写图片描述

演示地址：暂未开放，请前往在线代码测试网

测试代码如下：固定格式在这里就省略了，如果有问题大家可以自行调整。

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>

邹大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】Tab选项卡（li之间的切换）

演示地址：暂未开放，请前往在线代码测试网 HTML代码如下：固定格式在这里就省略了<html> <head></head> <body> <div class="titTabs" style="display: none"> <ul class="titTab"> <li class="active"> <i></i> <span>网点</span> </li>
复制链接

扫一扫

专栏目录