1.结构布局

<div class="tab">
      <div class="tab_list">
        <ul>
          <li class="current"&gt;商品介绍</li&gt;
          <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>

原文地址:https://blog.csdn.net/shi15926lei/article/details/127040965

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_40182.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注