我是jquery tab切换

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我是jquery tab切换</title>
    <style>
        *{
            padding:0px;
            border:0px;
            margin:0px;
        }
        body,html{
            width:100%;
            height:100%;
        }
        .tab{
            width:100%;
            list-style-type: none;
            position: absolute;
            top:0px;
            z-index: 10;
            height:30px;
        }
        li{
            border:solid 1px #efefef;
            background: #ffffff;
            float:left;
            width:100px;
            height:30px;
        }
        .active{
            border-bottom:solid 1px #ffffff !important;
        }
        .container{
            width:100%;
            border:solid 1px #efefef;
            position: absolute;
            top:31px;
            z-index: 3;
        }
        .container>div{
            width:400px;
            float:left;
        }
    </style>
  </head>
  <body>
    <ul class="tab">
      <li id="tab1" value="1" class="active">10元套餐</li>
      <li id="tab2" value="2">20元套餐</li>
      <li id="tab3" value="3">30元套餐</li>
    </ul>
    <div class="container">
        <div class="content1">我是10元套餐</div>
        <div class="content2" style="display:none">我是20元套餐</div>
        <div class="content3" style="display:none">我是30元套餐</div>
    </div>
    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      // 给3个li添加监听事件 第一种
    var $contents = $('.container>div')
    var $tab = $('.tab>li')
    //   $('.tab>li').click(function() { // 隐士遍历
    //     // 先隐藏所有
    //     $contents.css('display', 'none')
    //     $tab.removeClass('active')
    //     // 再找到当前点击的下标
    //     var $index = $(this).index()
    //     // 再将点击的下表对应的content显示出来
    //     $contents[$index].style.display = 'block'
    //     // $($contents[$index]).css('display', 'block')
    //     $tab[$index].className = 'active'
    //   })

    // 第二种
      var currentIndex = 0
      $('.tab>li').click(function() { // 隐士遍历
        // 先隐藏当前默认选中的
        $contents[currentIndex].style.display = 'none'
        $($tab[currentIndex]).removeClass('active')
        // 再找到当前点击的下标
        var $index = $(this).index()
        // 再将点击的下表对应的content显示出来
        $contents[$index].style.display = 'block'
        // $($contents[$index]).css('display', 'block')
        $($tab[$index]).addClass('active')
        // 更新下标
        currentIndex = $index
      })
    </script>  
</body>
</html>
我是jquery tab切换

推荐阅读更多精彩内容
