H5页面两层tab切换嵌套

H5页面两层tab切换嵌套

最近经朋友介绍接了个外包页面就一个简单的H5引流页面，布局就一个两层嵌套的tab切换。

效果如图：

直接上代码

css：

<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .clearfix:after {
      content: "";
      display: block;
      visibility: hidden;
      height: 0;
      clear: both;
    }
    .clearfix {
      zoom: 1;
    }
    html {
      font-size: 100px;
    }
    body {
      min-width: 300px;
      max-width: 750px;
      margin: 0 auto;
      background: #fff;
      font-family: Arial, 'PingFang SC', 'Microsoft YaHei', Tahoma, 'sans-serif';
    }
    .main {
      width: 100%;
    }
    .btn {
      width: 100%;
      height: 1.2rem;
      display: flex;
      justify-content: space-between;
    }
    .spanList {
      font-size: 0.36rem;
      color: #3f3f3f;
      text-align: center;
      line-height: 1.2rem;
      display: inline-block;
      position: relative;
      letter-spacing: 0.005rem;
      font-weight: 400;
      width: 33.333333%;
    }
    .active {
      color: #3f3f3f;
      text-align: center;
      line-height: 1.2rem;
      letter-spacing: 0.005rem;
      display: inline-block;
      background: #ccc;
      font-weight: 700;
    }
    .context {
      width: 100%;
      float: left;
    }
    .con {
      display: none;
      width: 7.5rem;
    }
    ul {
      width: 7.5rem;
      height: 1.5rem;
      background: #ccc;
      display: flex;
      flex-flow: wrap;
      justify-content: space-between;
    }
    li {
      text-align: center;
      width: 1.8rem;
      display: block;
      list-style: none;
      cursor: pointer;
      height: 0.6rem;
      line-height: 0.6rem;
      background: pink;
      font-size: 0.4rem;
      text-align: center;
    }
    .choice {
      background: #409EFF;
      color: #fff;
    }
    .tab-item {
      display: none;
      font-size: 0.8rem;
    }
    .show {
      display: block;
    }
  </style>

html：

<div class="main">
    <div class="btn">
      <!-- Tab标题 -->
      <span class="active spanList">课程介绍</span>
      <span class="spanList">用户故事</span>
      <span class="spanList">常见问题</span>
    </div>
    <div class="context">
      <!-- Tab内容 -->
      <div class="con">
        <ul class="clearfix">
          <li tabid="1" class="choice">tab1</li>
          <li tabid="2">tab2</li>
          <li tabid="3">tab3</li>
          <li tabid="4">tab4</li>
          <li tabid="5">tab5</li>
          <li tabid="6">tab6</li>
          <li tabid="7">tab7</li>
        </ul>
        <div id="box">
          <div class="tab-item show">课程介绍Tab-item1</div>
          <div class="tab-item">课程介绍Tab-item2</div>
          <div class="tab-item">课程介绍Tab-item3</div>
          <div class="tab-item">课程介绍Tab-item4</div>
          <div class="tab-item">课程介绍Tab-item5</div>
          <div class="tab-item">课程介绍Tab-item6</div>
          <div class="tab-item">课程介绍Tab-item7</div>
        </div>
      </div>
      
      <div class="con">
        <ul class="clearfix">
          <li tabid="1" class="choice">tab1</li>
          <li tabid="2">tab2</li>
          <li tabid="3">tab3</li>
          <li tabid="4">tab4</li>
          <li tabid="5">tab5</li>
          <li tabid="6">tab6</li>
          <li tabid="7">tab7</li>
        </ul>
        <div id="box">
          <div class="tab-item show">用户故事Tab-item1</div>
          <div class="tab-item">用户故事Tab-item2</div>
          <div class="tab-item">用户故事Tab-item3</div>
          <div class="tab-item">用户故事Tab-item4</div>
          <div class="tab-item">用户故事Tab-item5</div>
          <div class="tab-item">用户故事Tab-item6</div>
          <div class="tab-item">用户故事Tab-item7</div>
        </div>
      </div>
      
      <div class="con">
        <ul class="clearfix">
          <li tabid="1" class="choice">tab1</li>
          <li tabid="2">tab2</li>
          <li tabid="3">tab3</li>
          <li tabid="4">tab4</li>
          <li tabid="5">tab5</li>
          <li tabid="6">tab6</li>
          <li tabid="7">tab7</li>
        </ul>
        <div id="box">
          <div class="tab-item show">常见问题Tab-item1</div>
          <div class="tab-item">常见问题Tab-item2</div>
          <div class="tab-item">常见问题Tab-item3</div>
          <div class="tab-item">常见问题Tab-item4</div>
          <div class="tab-item">常见问题Tab-item5</div>
          <div class="tab-item">常见问题Tab-item6</div>
          <div class="tab-item">常见问题Tab-item7</div>
        </div>
      </div>
    </div>
  </div>

js：

// rem换算
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth >= 750) {
            docEl.style.fontSize = '100px';
          } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          }
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    // tab 切换
    $(".con").eq(0).show();
    $(".btn span").click(function () {
      var num = $(".btn span").index(this);
      $(".con").hide();
      $(".con").eq(num).show();
      $(this).attr("class", "active spanList");
      $(this).siblings().attr("class", "spanList");
    })
    $(".con li").click(function () {
      // 修改tab标签样式
      $(this).attr("class", "choice")
      $(this).siblings().attr("class", "")

      // 获取tab ID
      var itemId = $(this).attr("tabid") - 1;

      // 切换到指定tab
      $(this).parents('.con').find("#box").find(".tab-item:eq(" + itemId + ")").addClass("show");
      $(this).parents('.con').find("#box").find(".tab-item:eq(" + itemId + ")").siblings().removeClass("show");
	});

番外篇：
最近在持续混吃等死的日子里，又双叒(ruò)叕(zhuó)间歇性踌躇满志发作了，就突发奇想决定把这么多年的做的一些东西整理出来发发CSDN，So如果对您有用希望点个赞，没营养(那是正常的就是个low鸡板砖工)请忽略，谢谢!~~!