Tab选项卡切换效果_学习笔记

首页免费课 Tab选项卡切换效果笔记

Tab选项卡切换效果

                
                Amy
            
                    查看讲师更多课程 
                    Amy讲师的其他课程
                
CSS3实现漂亮ToolTips效果
初级·42722
免费课程
                                
css3实现网页平滑过渡效果
初级·54371
免费课程
                                
CSS3实现“图片阴影”效果
初级·34769
免费课程
                                
DOM事件探秘
中级·99544
免费课程
                                
瀑布流布局
初级·97759
免费课程
                                
                难度初级
            
                时长 1小时34分
            
                学习人数
            
综合评分9.73
                            233人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.8
                                简洁易懂
                            
                                9.5
                                逻辑清晰

最热最新

番茄花园k

创建和标题对应顺序的div组，使用js通过获取标题数组和内容数组，给标题项赋予index属性，通过index属性在对应标题项的事件被触发后，获取对应index的内容项进行操作，从而达到切换选项卡的目的

查看全部

0 采集收起来源：js实现切换效果
2015-08-20
番茄花园k

标题高亮的边框处理： 1. 最左和最右的标题项被选择时，边框和外边框靠近会使边框变为2倍宽度，通过将标题栏设置得比外div元素宽，绝对定位使标题栏left:-1px，令内边框和外边框重合，从而只显示1倍边框宽度。 2. 下边框处理：将下边框颜色设为白色即可。 3. 左右边框处理：在定义标题项宽度时通过padding留出左右边框的位置，在被选择时设置左右边框后清除掉padding即可，从而不会使文本内容发生变化。

查看全部

0 采集收起来源：tab页面布局-标题布局
2015-08-18
物语2018

clearTimeout使用方法

查看全部

0 采集收起来源：js实现延迟切换
2015-08-18
朝夕v8

禁用按钮：send.disabled = "false";或者send.setAttribute("disabled",true);或者send.setAttribute("disabled","disabled") 启用按钮：send.removeAttribute("disabled");或者send.disabled = false;

查看全部

0 采集收起来源：编程练习
2018-03-22
kingry 01:20

Tab切换的四种效果：划过切换；点击切换；延迟切换；自动切换

查看全部

0 采集收起来源：课程简介
2015-08-14
朝夕v8

setTimeout()和setInterval()的区别： setTimeout()方法是超时调用，什么时间之后执行什么函数，只执行一次； setInterval()方法是一直在调用，可执行多次 window.onload = function(){ //标签的索引 var index = 0; var timer = null; var lis = $('notice-tit').getElementsByTagName('li'); divs = $('notice-con').getElementsByTagName('div'); if(lis.length!=divs.length) return; //遍历所有的页签 for(var i=0;i<lis.length;i++){ //添加id属性寻找索引 lis[i].id = i; lis[i].onmouseover = function(){ //用that这个变量来引用当前li，防止和window对象冲突，全局变量。 var that = this; //如果存在准备执行的定时器，立刻清除，只有当前停留的时间大于500ms时才开始执行 if(timer){ clearTimeout(timer); timer = null; } //延迟半秒执行 //setTimeout是window对象的属性，所以在他的函数中this所指的是window对象， timer = window.setTimeout(function(){ for(var j=0;j<lis.length;j++){ lis[j].className = ''; divs[j].style.display = 'none'; } lis[that.id].className = 'select'; divs[that.id].style.display = 'block'; },500); } } }

查看全部

0 采集收起来源：js实现延迟切换
2018-03-22
hou_hou 01:20

tab切换分类

查看全部

0 采集收起来源：课程简介
2015-08-12
Dlie偶尔神隐

一个0写成了o，找了好久- -

查看全部

1 采集收起来源：编程练习
2015-08-12
Kry星晨碎月stal 04:54

“划过四次开了四个定时器”但是每次划到一个页签的时候都有清除定时器啊？为什么啊。。。没听懂...

查看全部

0 采集收起来源：bug解决及定时器优化
2015-08-11
qq_夢難尋_0

我只是个新手。。

查看全部

0 采集收起来源：编程练习
2015-08-10
sweetlife哦耶

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换；index=curIndex 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。if(timer){ clearInterval(timer); timer=null; }

查看全部

0 采集收起来源：bug解决及定时器优化
2015-08-08
sweetlife哦耶

一、鼠标快速切换的时候，可能回重起很多定时器，可能会造成系统变得很卡，所以再添加定时器之前，要先清除有等待的定时器，即：if(timer) {clearTimerval(timer); timer=null;}

查看全部

0 采集收起来源：bug解决及定时器优化
2015-08-08
小光头

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换；index=curIndex 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。if(timer){ clearInterval() }

查看全部

0 采集收起来源：bug解决及定时器优化
2015-08-06
小光头

@@--Tab选项卡切换效果 3-2 加入手动切换功能及代码优化 --选项卡自动切换与滑动事件结合：-- 选项卡自动切换与滑动事件结合： 1、加载加载页面时，调用定时器事件； 2、鼠标滑过时清除定时器，并执行滑动切换； 3、鼠标离开时调用定时器； 4、代码优化，封装函数与调用函数

查看全部

0 采集收起来源：加入手动切换功能及代码优化
2015-08-06
小光头

选项卡自动切换： 1、清除当前延迟时间； 2、获取标题数组、内容数组； 3、指定当前标题标志； 4、绑定定时事件； 5、循环遍历标题，即判断标题标志，并在遍历至最后一个标题后，将其设定指向第一个标题； 6、执行当前事件，显示效果。 .className=""; '','current'; .style.display="";none,block

查看全部

0 采集收起来源：js实现自动切换实现
2018-03-22