为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 Tab选项卡切换效果 笔记

Tab选项卡切换效果

Amy
查看讲师更多课程 Amy讲师的其他课程
难度初级
时长 1小时34分
学习人数
综合评分9.73
233人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.5 逻辑清晰
最热 最新
  • 慕容9290173 09:03

    宽度计算技巧0318


    6233b9950001683906400360.jpg
    查看全部
    0 采集 收起 来源：tab页面布局-标题布局

    2022-03-18

  • 慕容9290173 07:36

    这个坑记住0318


    6233b94300018e0f06400360.jpg
    查看全部
    0 采集 收起 来源：tab页面布局-标题布局

    2022-03-18

  • 小紫英

    window.onload=function(){

          // 将所有点击的标题和要显示隐藏的列表取出来

          var menu=document.getElementById('menu');

          var allTits=menu.getElementsByTagName("p");

          var allCons=menu.getElementsByTagName('ul');

         // 遍历所有要点击的标题且给它们添加索引及绑定事件

         // 获取点击的标题上的索引属性，根据该索引找到对应的列表

         // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来

         for(var i=0;i<allTits.length;i++){

             allTits[i].id=i;

             allTits[i].onclick=function(){

                for(var j=0;j<allCons.length;j++){

                  allCons[j].style.display='none';

                }

                if(allCons[this.id].style.display=='none'){

                    allCons[this.id].style.display='block';

                }else{

                    allCons[this.id].style.display='none';

                }

             }

         }

    }


    查看全部
    0 采集 收起 来源：编程练习

    2020-12-27

  • 手可摘星_陈

    css样式计算部分没有理解

    查看全部
    0 采集 收起 来源：tab页面布局-标题布局

    2020-11-16

  • VictoryLang

    延迟选项卡的核心思路是：

            选项卡重置操作和选中操作放入定时器内

    没看视频自己做时：

            选项卡重置操作放在定时器外

            选中操作放入定时器内

    这样造成鼠标放上去后，选项卡空白等待（block）的情况发生。

    重点：重置与事件同时进行。

    查看全部
    0 采集 收起 来源：js实现延迟切换

    2020-07-06

  • qq_兂吢_0

    console.log();     console.debug();     console.info();     console.error();     console.warn();

    （1）除了console.log() 其他都会显示行号

    （2）除了console.log()和console.debug()其他都会有图标区别

    console.assert()

    用于判断一个表达式是否是真，如果为错误的话，会输出错误提示

    console.clear()

    用于清除控制台信息，其实跟点”清除“按钮一样的

    console.dir()

    用于表格化显示一个对象

    console.dirxml()

    在控制台中显示XML数，例如console.dirxml(document.body)会在控制台显示body的DOM文档树

    console.trace()

    显示JavaScript执行的堆栈信息

    console.group()、console.groupCollapsed()、console.group()

    对输出到控制台的信息进行分组

    console.time()、console.timeEnd()

    一般用于计算某段JavaScript执行的时间

    console.profile()、console.profileEnd()

    用于查看一段JavaScript代码的性能分析

    console.profile()、console.profileEnd()

    用于查看一段JavaScript代码的性能分析

    console.count()

    输出console.count()所在语句执行的次数，例如你要看一个循环是否执行了你预想的次数，可以在循环中放入一个console.count("mycount")；这样，循环执行完成后，控制台就会显示出循环执行的次数

    console.exception()

    显示程序中出现错误的堆栈和相关错误信息

    console.table()

    将数据用表格的形式显示出来，比如数组，对象之类的


    查看全部
    0 采集 收起 来源：js实现自动切换实现

    2020-01-09

  • S扶摇S

    <!doctype html>

    <html>

    <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;

    var lis = pic.getElementsByTagName('li'); 

          // 定义并调用自动播放函数

      timer = setInterval(autoPlay,2000);

        

      function autoPlay(){

       index++;

       if(index>=list.length){

        index = 0;

       }

       changeOption(index);

      } 

          // 定义图片切换函数

       function changeOption(curIndex){

       for(var j=0;j<list.length;j++){

        list[j].className = '';

        lis[j].style.display = 'none';

       }


       //高亮显示当前页签

       list[curIndex].className = 'on';

       lis[curIndex].style.display = 'block'; 

       //解决bug

       index = curIndex;

      }

         // 鼠标划过整个容器时停止自动播放

      wrap.onmouseover = function(){

       clearInterval(timer);

      }

         // 鼠标离开整个容器时继续播放至下一张

         wrap.onmouseout = function(){

       timer = setInterval(autoPlay,2000);

      }

         // 遍历所有数字导航实现划过切换至对应的图片

       for(var i=0;i<list.length;i++){

       list[i].id = i;

       list[i].onmouseover = function(){

        changeOption(this.id);

       }

      }

       }


      </script>

    </head>

    <body>

      <div class="wrap" id='wrap'>

        <ul id="pic">

          <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.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>


    查看全部
    0 采集 收起 来源：焦点轮播图效果

    2019-09-05

  • S扶摇S

    <!doctype html>

    <html>

    <head>

        <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

    window.onload=function(){

        var send=document.getElementById('send'),

            times=60,

            timer=null;

                

        send.onclick=function(){

          // 计时开始 

              if(timer){

                  clearInterval(timer);

                  timer=null;

              }

              

              timer=setInterval(sendon,1000);

        }

            function sendon(){

                    if(times<=0){

                        clearInterval(timer);

                        times=60;

                        send.value="发送验证码";

                        send.disabled=false;

                    }

                    else{

                        times--;

                        send.value=times+"秒后重试";

                        send.disabled=true;

                    }

                    

                    

                }

    }

    </script>

    </head>

    <body>

    <input type="button" id="send" value="发送验证码">

    </body>

    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-09-03

  • S扶摇S

    <!doctype html>

    <html>

    <head>

        <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{margin:0;

         padding:0;

         font-size:13px;

         list-style:none;}


    .menu{width:210px;

          margin:50px auto;

          border:1px solid #ccc;}


    .menu p{height:25px;

            line-height:25px;

            font-weight:bold;

            background:#eee;

            border-bottom:1px solid #ccc;

            cursor:pointer;

            padding-left:5px;}


    .menu div ul{display:none;}


    .menu li{height:24px;

             line-height:24px;

             padding-left:5px;}

    </style>

    <script type="text/javascript">

    function $(id){




        return typeof id==="string"?document.getElementById(id):id;


        


        }

    window.onload=function(){


          // 将所有点击的标题和要显示隐藏的列表取出来

          var titles=$('menu').getElementsByTagName('p');

           var conts=$('menu').getElementsByTagName('ul');


         // 遍历所有要点击的标题且给它们添加索引及绑定事件

       

             for(var i=0;i<titles.length;i++){

              titles[i].id=i;

             titles[i].onclick = function () {

    for(var j=0;j<titles.length;j++) {


                     conts[j].style.display='none'


                 }


                 conts[this.id].style.display='block'

             }


             }

         


         // 获取点击的标题上的索引属性，根据该索引找到对应的列表


         // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来


    }

    </script>

    </head>

    <body>

    <div class="menu" id="menu">

    <div>

    <p>Web前端</p>

    <ul >

    <li>JavaScript</li>

    <li>DIV+CSS</li>

    <li>jQuery</li>

    </ul>

    </div>

    <div>

    <p>后台脚本</p>

    <ul>

    <li>PHP</li>

    <li>ASP.net</li>

    <li>JSP</li>

    </ul>

    </div>

    <div>

    <p>前端框架</p>

    <ul>

    <li>Extjs</li>

    <li>Esspress</li>

    <li>YUI</li>

    </ul>

    </div>

    </div>

    </body>

    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-09-03

  • 打算卖卷饼的程序员

    <script type="text/javascript">

    window.onload=function(){

        var send=document.getElementById('send'),

            times=60,

            timer=null;

        send.onclick=function(){

          // 计时开始 

      timer = setInterval(yzm,1000)

      function yzm(){

      times--;

      send.value = times + "秒后重试";

      if (times<=0) {

      send.value = "发送验证码"

    times = 60 ;

    clearInterval(timer);

      }

      }

        } 

    }

    </script>


    查看全部
    0 采集 收起 来源：编程练习

    2019-07-02

  • 打算卖卷饼的程序员

    <script type="text/javascript">

    // 封装id函数

    function $(id) {

    return typeof id === 'string' ? document.getElementById(id) : id;

    }

    window.onload = function() {


    // 将所有点击的标题和要显示隐藏的列表取出来

    var tits = $('menu').getElementsByTagName('p');

    var bys = $('menu').getElementsByTagName('ul')


    if (tits.length!=bys.length) 

    return;

    // 遍历所有要点击的标题且给它们添加索引及绑定事件

    for (var i = 0; i < tits.length; i++) {

    tits[i].id=i;

    tits[i].onmouseover=function(){

    for (var j = 0; j < tits.length; j++) {

    bys[j].style.display='none';

    }

    bys[this.id].style.display="block";

    }

    }


    }

    </script>


    查看全部
    1 采集 收起 来源：编程练习

    2019-07-02

  • zjs979575

    <!doctype html>

    <html>

    <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').getElementsByTagName("li");

            list=document.getElementById('list').getElementsByTagName('li');

            index=0;

            timer=null;

        

        for(var i=0;i<list.length;i++) {

            list[i].index=i;

            list[i].onmouseover=function() {

                clearInterval(timer);

                change(this.index);

                index=this.index;

            }

        }

        wrap.onmouseleave=function() {     //用onmouseout的话鼠标离开序号时就开始切换图片了

            if(timer) {

                clearInterval(timer);

                timer=null;

            }

            timer=setInterval(Autoplay,2000);

        }

        if(timer) {

            clearInterval(timer);

            timer=null;

        }

        timer=setInterval(Autoplay,2000);

          // 定义并调用自动播放函数

        

        function Autoplay() {

            index++;

            if(index>=list.length) {

                index=0;

            }

            change(index);

        }

        function change(curIndex) {

            for(var j=0;j<list.length;j++) {

                list[j].className="";

                pic[j].style.display="none";

                /*pic=document.getElementById('pic');

                  pic.childNodes[j].style.display="none";

                  这样为什么不行?

                */

            }

            list[curIndex].className="on";

            pic[curIndex].style.display="block";

        }

          // 定义图片切换函数

        

        

         // 鼠标划过整个容器时停止自动播放


         // 鼠标离开整个容器时继续播放至下一张

        

         // 遍历所有数字导航实现划过切换至对应的图片

       }


      </script>

    </head>

    <body>

      <div class="wrap" id='wrap'>

        <ul id="pic">

          <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>

          <li><img src="http://img1.sycdn.imooc.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>


    查看全部
    0 采集 收起 来源：焦点轮播图效果

    2019-03-27

  • zjs979575

    <!doctype html>

    <html>

    <head>

        <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

    window.onload=function(){

        var send=document.getElementById('send'),

            times=5,

            timer=null;

        send.onclick=function(){

          // 计时开始 

            send.disabled=true;

            send.value=times+"秒后重试";

            timer=setInterval(change,1000);

        }

        function change() {

                times=times-1;

                if(times==0){

                    send.value="发送验证码";

                    clearInterval(timer);

                    times=10;

                    send.disabled=false;

                }

                else{

                    send.value=times+"秒后重试";

                }

            }

    }

    </script>

    </head>

    <body>

    <input type="button" id="send" value="发送验证码">

    </body>

    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-03-27

  • iFlowers 00:54

    将id的获取封装成一个方法。

    查看全部
    0 采集 收起 来源：js实现切换效果

    2019-03-27

首页上一页1234567下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1、您应该已经熟悉html标签和css样式表；2、您还应该已经熟悉JavaScript 或 jQuery的基础知识。
老师告诉你能学到什么？
您可以举一反三，制作非常精美风格多样的 Tab 切换效果，能够帮助你丰富或改进网站中的选项卡功能的用户体验。

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程