Tab选项卡切换效果_技术问答

leepulse

关于计时器的一个问题

可以把大DIV（包含页签P和内容ul部分）放在鼠标移入事件内

2021-05-08 1回答·483浏览
手可摘星_陈

求解答~~~耐心等待

不知道

2020-11-17 1回答·634浏览
SummerParis

添加定时器

经测试运行ok，可以直接复制，有问题的话大家可以指出来交流一下。

2020-08-19 1回答·677浏览
SummerParis

直接就用遍历的i，不用再添加id索引

你这个是错误的，你的contents都没遍历，直接contents[i]

2020-08-19 1回答·684浏览
初学小小白

自己写的代码，供参考

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .wrap {
      height: 170px;
      width: 490px;
      margin: 60px auto;
      overflow: hidden;
      position: relative;
      margin: 100px auto;
    }

    .wrap ul {
      position: absolute;
    }

    .wrap ul li {
      height: 170px;
    }

    .wrap ol {
      position: absolute;
      right: 5px;
      bottom: 10px;
    }

    .wrap ol li {
      height: 20px;
      width: 20px;
      background: #ccc;
      border: solid 1px #666;
      margin-left: 5px;
      color: #000;
      float: left;
      line-height: center;
      text-align: center;
      cursor: pointer;
    }

    .wrap ol .on {
      background: #E97305;
      color: #fff;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      var wrap = document.getElementById('wrap'),
        pic = document.getElementById('pic'),
        list = document.getElementById('list').getElementsByTagName('li'),
        index = 0,
        timer = null;
      //自动播放li
        timer = setInterval(autoPlay, 1000);

      //封装自动切换函数
      function autoPlay() {
        index++;
        if (index >= list.length) {
          index = 0;
        }
        picChange(index);
      }
      //封装切换图片函数
      function picChange(curindex) {
        for (i = 0; i < list.length; i++) {
          list[i].className = '';
        }
        //li自动高亮
        list[curindex].className = 'on';
        pic.style.top = -(curindex * 170) + "px";
      }
      //封装定时器函数
      function intimer() {
        timer = setInterval(function () {
          index++;

          if (index >= list.length) {
            index = 0;
          }
          //将其他的li高亮清除
          for (i = 0; i < list.length; i++) {
            list[i].className = '';
          }
          //li自动高亮
          list[index].className = 'on';
          pic.style.top = -(index * 170) + "px";
        }, 1000)
      }
      //鼠标滑过和离开状态
      for (let j = 0; j < list.length; j++) {
        pic.onmouseover = function () {
          clearInterval(timer);

        }
        index = j;
        pic.onmouseout = function () {
          console.log(index)
          intimer();
        }

      }

    }
  </script>
</head>

<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>

</html>

2020-07-09 1回答·777浏览
一只小新

做的稍微完善一点点。

不错，有想像

2020-05-14 1回答·700浏览
慕码人5319942

东西出不来

断点打一下试试

2020-04-30 3回答·621浏览
慕慕1579095

跳转问题怎么解决

是没有计算好个数

2020-04-30 1回答·789浏览
慕粉7054916

求救，怎么回事？

2020-04-22 0回答·514浏览
慕久风采

运行没有报错，但是没有切换效果,大神帮帮忙

已解决，是结构问题，不细心导致

2020-04-13 1回答·596浏览
weixin_慕工程4183851

tagname提示为空

提示为空，说明你没有获取到正确的DOM元素，用console.log检查下。
window.onload=function(){
var menu = document.getElementById('menu');
var item = menu.getElementsByTagName('div');
for(var i = 0; i < item.length; i++) {
item[i].onclick = function() {
for(var i = 0; i < item.length; i++) {
item[i].children[1].style.display = 'none';
}
this.children[1].style.display = 'block';
}
}

2020-03-24 1回答·754浏览
慕九州2297532
运行时没有切换效果
```
window.onload=function(){
```
window.onload 后面是一个等于
2020-02-29 1回答·693浏览
qq_双眸_mvCPZ6

为什么我给li赋值id加不上急急急！！！

typeof id == 你写了3个等号

2019-10-30 3回答·870浏览
qq_精慕门4154369

为什么没有效果

2019-10-24 0回答·461浏览
qq_精慕门4154369

可以讲ul li换成p标签吗

用 ul li 比较规范一点，不建议使用p标签哦

2019-10-24 1回答·988浏览
joy灬

请问大佬有没有老师的所有源码文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{margin:0;
    padding:0;
    list-style:none;}
  .wrap{height:170px;
        width:490px;
        margin:60px auto;
        overflow: hidden;
        position: relative;
        margin:100px auto;}
  .wrap ul{position:absolute;  transition: all 1s;
    -webkit-transition: all 1s; /* Safari */ }
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
           right:5px;
           bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              line-height:center;
              text-align:center;
              cursor:pointer;}
  .wrap ol .on{background:#E97305;
               color:#fff;}

  </style>
  <script type="text/javascript">
  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic'),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;

      // 定义并调用自动播放函数
      function autoplay(){
        index++;
          if(index == list.length){
            index = 0;
          }
          autoImg()
      }
      timer = setInterval(function(){  autoplay() },3000)

      // 定义图片切换函数
     function autoImg(){
        for( var i=0; i<list.length;i++){
              list[i].className = "";
          }
          list[index].className = "on";
          pic.style.marginTop = index*-170+"px";
     }
     // 鼠标划过整个容器时停止自动播放
     wrap.onmouseover = function(){/*鼠标引入，清除定时器，轮播图停止*/
        clearInterval(timer);
    };
     // 鼠标离开整个容器时继续播放至下一张
     wrap.onmouseout = function(){/*鼠标移出，重新调用定时器，轮播图开始*/
      timer = setInterval(function(){  autoplay() },3000)
    };
     // 遍历所有数字导航实现划过切换至对应的图片
     for( var i = 0; i<list.length;i++){
      list[i].index = i;
      list[i].onmousemove = function(){
        index = this.index ;// 重置索引值
        // alert(this.index)
        autoImg()
      }
     }
   }

  </script>
</head>
<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>
</html>

2019-10-20 1回答·701浏览
慕慕0116261

问：amy老师和一只帅蚂蚁讲的tab选项卡切换，哪个更适合新手入门

amy

2019-08-17 1回答·657浏览
慕粉0924426887

求救大佬们看看是哪里出错了？

var ps=$('menu-ll').getElementsByTagName('p');//获取p跟ul的下标 //错误
改成var ps = document.getElementsByTagName('p')
var uls=$('menu-hh').getElementsByTagName('ul'); //错误
改成var uls= document.getElementsByTagName('ul')
还有这一段
if(sy>=ps.length){//做一个判断以至于不会一直加下去
ps=0;
}
ps = 0 ///你想表达 sy = 0 ，大哥仔细点，都是很基础的，js代码不要放在html前面，

2019-07-26 1回答·623浏览
慕虎0938118

老师讲的很清晰，做题就像照葫芦画瓢

还要有自己的思维同学

2019-07-23 1回答·841浏览
慕虎0938118

跑起来了啊

恭喜你

2019-07-23 1回答·736浏览
慕勒6779931

交作业，不足之处，请大佬们指出。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{margin:0;
    padding:0;
    list-style:none;}
  .wrap{height:170px;
        width:490px;
        margin:60px auto;
        overflow: hidden;
        position: relative;
        margin:100px auto;}
  .wrap ul{position:absolute;  transition: all 1s;
    -webkit-transition: all 1s; /* Safari */ }
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
           right:5px;
           bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              line-height:center;
              text-align:center;
              cursor:pointer;}
  .wrap ol .on{background:#E97305;
               color:#fff;}

  </style>
  <script type="text/javascript">
  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic'),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;

      // 定义并调用自动播放函数
      function autoplay(){
        index++;
          if(index == list.length){
            index = 0;
          }
          autoImg()
      }
      timer = setInterval(function(){  autoplay() },3000)

      // 定义图片切换函数
     function autoImg(){
        for( var i=0; i<list.length;i++){
              list[i].className = "";
          }
          list[index].className = "on";
          pic.style.marginTop = index*-170+"px";
     }
     // 鼠标划过整个容器时停止自动播放
     wrap.onmouseover = function(){/*鼠标引入，清除定时器，轮播图停止*/
        clearInterval(timer);
    };
     // 鼠标离开整个容器时继续播放至下一张
     wrap.onmouseout = function(){/*鼠标移出，重新调用定时器，轮播图开始*/
      timer = setInterval(function(){  autoplay() },3000)
    };
     // 遍历所有数字导航实现划过切换至对应的图片
     for( var i = 0; i<list.length;i++){
      list[i].index = i;
      list[i].onmousemove = function(){
        index = this.index ;// 重置索引值
        // alert(this.index)
        autoImg()
      }
     }
   }

  </script>
</head>
<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>
</html>

2019-07-23 1回答·641浏览
慕勒6779931

交作业。。

经验+1

2019-07-22 1回答·646浏览
tigerchn

完美测试成功

是要有这样的好习惯

2019-07-13 1回答·822浏览
qq_年少无知_5
怎么在选项卡下面添加一个新的div呢，添加不了呀
```
style="display: none"
```
其实添加成功了，但是你把他隐藏了。
2019-06-09 1回答·815浏览
慕仰6027081

为什么这样写，鼠标点到选项上的时候不停了，还是继续切换下去，而且切换速度变快了

很简单，在你的onmouseout中重新定义了定时器。把定时器var timer改成 timer即可

2019-05-30 1回答·862浏览
qq_慕粉7082047

为什么报错出现这个。

应该是js这个脚本的引用出现问题

2019-05-27 1回答·872浏览
小阳2019

tab内容

贴一下全部的代码

2019-04-27 1回答·779浏览
qq_慕田峪3304025

为什么不显示？

2019-04-20 2回答·778浏览
luciamiracle

关于window.onload = tab的问题，求助各位大神，望回答，谢谢

这么说吧，不加括号，等号后面代表的是这个函数体，而加了括号，代表的就是函数执行的结果了。

2019-04-02 1回答·960浏览
sayHi被注册

代码在自己的编辑器上跑起来了

在设置定时器之前，要先清除准备执行的定时器

2019-04-01 1回答·962浏览

数据加载中...