基于jquery的tab切换Dome

最新推荐文章于 2024-05-21 14:15:14 发布

银子优优

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量100

点赞数

文章标签： javascript jquery css html5

本文链接：https://blog.csdn.net/qq_46682044/article/details/108000743

版权

基于jquery的tab切换Dome

js实现标题+内容+小圆点一起切换，html、css、js干货如下：

js代码

 $(function () {
        //定义左右按钮使用的索引
        let num = 0;

        //点击头部标题，切换当前自身的类名，并通过所有操作索引
        $(".title>ul>li").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          let index = $(this).index();
          num = index;
          //利用索引移动group来显示对应的图片
          $(".group")
            .stop(true)
            .animate({ left: index * -700 + "px" }, 1000);
          //控制小圆点的切换，索引
          $(".footer>ul>li")
            .eq(index)
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
        //点击底部标题，切换当前自身的类名，并通过所有操作索引
        $(".footer>ul>li").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          let index = $(this).index();
          num = index;
          //利用索引移动group来显示对应的图片
          $(".group")
            .stop(true)
            .animate({ left: index * -700 + "px" }, 1000);
          //控制小圆点的切换，索引
          $(".title>ul>li")
            .eq(index)
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
        //点击下一页 展示下一张紧挨着的图片，标题和小圆点都要切换，注意最大值
        $(".right").click(function () {
          if (num > 5) {
            num = 6;
          } else {
            num++;
          }
          // 索引+1
          $(".group")
            .stop(true)
            .animate({ left: num * -700 + "px" }, 1000);
          //控制小圆点的切换，索引
          $(".title>ul>li")
            .eq(num)
            .addClass("active")
            .siblings()
            .removeClass("active");
          $(".footer>ul>li")
            .eq(num)
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
        //点击上一页 展示下一张紧挨着的图片，标题和小圆点都要切换，注意最大值
        $(".left").click(function () {
          if (num < 1) {
            num = 0;
          } else {
            num--;
          }
          // 索引-1
          $(".group")
            .stop(true)
            .animate({ left: num * -700 + "px" }, 1000);
          //控制小圆点的切换，索引
          $(".title>ul>li")
            .eq(num)
            .addClass("active")
            .siblings()
            .removeClass("active");
          $(".footer>ul>li")
            .eq(num)
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
      });

html代码

<body>
    <!-- 外层 -->
    <div class="content">
      <!-- 标题 -->
      <div class="title">
        <ul>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
        </ul>
      </div>
      <!-- 列表 -->
      <div class="outBox">
        <div class="group">
          <!-- 单元格 -->
          <div class="single img1">11</div>
          <div class="single img2">22</div>
          <div class="single img3">33</div>
          <div class="single img4">44</div>
          <div class="single img5">55</div>
          <div class="single img6">66</div>
          <div class="single img7">77</div>
        </div>
      </div>
      <!-- 左右 -->
      <button class="left">上一页</button>
      <button class="right">下一页</button>
      <!-- 底部圆点 -->
      <div class="footer">
        <ul>
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>

css代码

<style>
      html,
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
        border: 0;
      }
      ul li {
        list-style: none;
      }
      .content {
        width: 700px;
        height: 480px;
        margin: auto;
        margin-top: 100px;
        position: relative;
        overflow: hidden;
      }
      .title > ul:after {
        content: "";
        display: block;
        clear: both;
      }
      .title > ul > li {
        float: left;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .title > ul > li.active {
        background: #f60;
        color: aqua;
      }
      .outBox {
        width: 700px;
        height: 400px;
        position: relative;
      }
      .outBox > .group {
        width: 4900px;
        height: 400px;
        position: absolute;
        line-height: 400px;
        text-align: center;
        top: 0;
        left: 0;
      }
      .outBox > .group:after {
        content: "";
        display: block;
        clear: both;
      }
      .outBox > .group > .single {
        width: 700px;
        height: 400px;
        float: left;
        background: pink;
        font-size: 80px;
        cursor: pointer;
      }
      .left {
        position: absolute;
        top: 200px;
        left: 0;
      }
      .right {
        position: absolute;
        top: 200px;
        right: 0;
      }
      .footer {
        width: 280px;
        height: 40px;
        line-height: 40px;
        margin: auto;
        position: absolute;
        bottom: 30px;
        left: 220px;
      }
      .footer > ul:after {
        content: "";
        display: block;
        clear: both;
      }
      .footer > ul > li {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        float: left;
        margin-right: 20px;
        background: gray;
        cursor: pointer;
      }
      .footer > ul > li.active {
        background: #f60;
      }
    </style>

小编Linay希望可以给你带来帮助哦，小编Linay还需要不断改进哦~~❤❤

银子优优

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的tab切换Dome

基于jquery的tab切换Domejs实现标题+内容+小圆点一起切换，html、css、js干货如下：js代码 $(function () { //定义左右按钮使用的索引 let num = 0; //点击头部标题，切换当前自身的类名，并通过所有操作索引 $(".title>ul>li").click(function () { $(this).addClass("active").siblings()
复制链接

扫一扫