利用jQuery做tab栏切换

1.结构布局

<div class="tab">
      <div class="tab_list">
        <ul>
          <li class="current">商品介绍</li>
          <li>规格与包装</li>
          <li>售后保障</li>
          <li>商品评价(5000)</li>
          <li>手机社区</li>
        </ul>
      </div>

      <div class="tab_con">
        <div class="item" style="display: block">商品介绍模板内容</div>

        <div class="item">规格与包装模板内容</div>

        <div class="item">售后保障模板内容</div>

        <div class="item">商品品价(5000)模板内容</div>

        <div class="item">手机社区模板内容</div>
      </div>
    </div>

2.样式布局

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .tab {
        width: 1200px;
        height: 200px;
        margin: 100px auto;
      }
      .tab_list ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .tab_list ul li {
        width: 150px;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        text-align: center;
        list-style: none;
        background-color: #eef1ee;
        border: 1px solid #eef1ee;
        cursor: pointer;
      }
      .tab .tab_list .current {
        background-color: #d6271f;
        color: #fff;
      }
      .tab .tab_con .item {
        display: none;
      }
      .colour {
        color: #d6271f;
      }
    </style>

 <script src="../js基础+js高级/js/jQuery.min.js"></script>(需要导入jQuery依赖)

3.javascript部分

 <script>
      /*案例分析
      1.点击上部的小li,当前li添加current类,其余兄弟移除类
      2.点击的同时,得到当前小li的索引号
      3.让下面里面相应索引号的item显示,其余的item隐藏
    */
      $(function () {
        $(".tab_list li").click(function () {
          $(this).addClass("current").siblings().removeClass("current");
          //声明一个变量
          let index = $(this).index();
          $(".tab_con .item").eq(index).show().siblings().hide();
        });
        // 鼠标经过小li边文字颜色
        $(".tab_list li").mouseenter(function () {
          $(this).addClass("colour").siblings().removeClass("colour");
        });
        // 鼠标离开小li文字颜色去掉
        $(".tab_list li").mouseout(function () {
          $(this).removeClass("colour");
        });
      });
    </script>