选项卡自动切换（有定时器）

最新推荐文章于 2024-07-14 12:56:18 发布

毛奈古

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量386

点赞数

分类专栏： js/jquery 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/Tkings233/article/details/120039708

版权

js/jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

参考:Tab选项卡自动切换效果js实现_weixin_30415801的博客-CSDN博客try.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="try.css"> ...https://blog.csdn.net/weixin_30415801/article/details/97350579

html：

<template>
    <div class="main">
      <div class="all">
        <dl class="all-one">
           //选项卡标题
          <div class="top">
            <dt class="title one">nav1</dt>
            <dt class="title">nav2</dt>
            <dt class="title">nav3</dt>
            <dt class="title">nav4</dt>
          </div>
            //选项卡内容
          <div class="down">
            <dd>
              <ul>
                <li v-for="(item, index) in imgList" :key="index">
                  <a href="#">
                    <img :src="item.url" alt="" />
                  </a>
                </li>
              </ul>
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next"
                :total="1000"
                :page-size="pagesize"
              >
              </el-pagination>
            </dd>
            <dd>2222222222222222222222</dd>
            <dd>3333333333333333333333</dd>
            <dd>44444444444444</dd>
          </div>
        </dl>
      </div>
  </div>
</template>

js：

<script type="text/javascript">

// $(function () {

// })

export default {
  mounted () {
    $(document).ready(function () {
     
      $('.one').addClass('tabactive'); //第一个标题默认选中
      $('dd:first').css('display', 'block'); //页面初始只显示第一个内容
      autoroll();
      hookThumb();
    });

    var i = -1; //第i+1个tab开始
    var offset = 2500; //轮换时间
    var timer = null;
//自动切换页面和标题
    function autoroll () {

      var n = $('.title').length - 1;
      i++;
      if (i > n) {
        i = 0;
      }
      slide(i);
      timer = window.setTimeout(autoroll, offset);
    }

//标题和内容选中改变样式
    function slide (i) {
      $('.title').eq(i).addClass('tabactive').siblings().removeClass('tabactive');

      $('dd').eq(i).css('display', 'block').siblings('dd').css('display', 'none');
    }

//鼠标手动操作
    function hookThumb () {
      $('.title').hover(
        function () {
          if (timer) {
            clearTimeout(timer);
            i = $(this).prevAll().length;
            slide(i);
          }
        },
        //鼠标滑动事件执行后在重新设置定时器 （这有跳转问题以后优化）
        // function () {

        //   timer = window.setTimeout(autoroll, offset);
        //   // this.blur();
        //   // return false;
        // }
      );
      //鼠标点击标题
      $('.title').click(function () {
        // console.log("点击")
        if (timer) {
          clearTimeout(timer); //清除定时器
          i = $(this).prevAll().length;//获取此标题前面的所有标题的个数=当前下标
          slide(i);//给当前选中的标题和内容添加样式
        }
        clearTimeout(timer);
      });
    }
  },
</script>

css:

.all {
  width: 70%;
  margin: auto;
  height: 1230px;
  .all-one {
    width: 100%;
    height: 1230px;
    background: cadetblue;
    //标题
    .top {
      width: 70%;
      margin: auto;
      height: 60px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-around;

      .title {
        // float: left;
        font-size: 15px;
        color: #d392a1;
        // opacity: 0.5;
        cursor: pointer;
        margin-top: 20px;
      }
    }
  //内容
    dd {
      display: none;
      background: yellow;
      height: 1230px;
      width: 96%;
      // position: relative;
      // left: 2%;
      margin: auto;

    
      ul {
        // position: absolute;
        width: 100%;
        height: 1000px;
        //  padding-left: 0px;
        list-style: none;
        // left: -1px;
        // display: flex;
        // justify-content: space-around;
        li {
          width: 47%;
          height: 320px;
          background: #9b2346;
          margin: 10px 10px;
          line-height: 60px;
          // overflow: hidden;
          float: left;
          position: relative;
          border-radius: 2px;
        }
      }
    }
  }
}

2. 选项卡切换页面（无定时器）

vue实现选项卡及选项卡切换效果https://www.jb51.net/article/138827.htm

毛奈古

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
选项卡自动切换（有定时器）

html：<template> <div class="main"> <div class="all"> <dl class="all-one"> //选项卡标题 <div class="top"> <dt class="title one">nav1</dt> <dt class=".
复制链接

扫一扫