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

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

Tab选项卡切换效果

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

最热最新

木大人

重复的代码可以考虑封装到同一个函数，然后调用。代码有点小区别可以考虑传参。

查看全部

2 采集收起来源：bug解决及定时器优化
2015-01-16
illuminiti

老师的return typeof id==='string'?document.getElementById(id)?id;会出现unexcepted token错误换成return "string" == typeof id ? document.getElementById(id) : id;就可以了为啥？

查看全部

1 采集收起来源：js实现切换效果
2018-03-22
受戒人

定时器属于window对象，如果再定时器方法内引用this，他指代的是window对象

查看全部

1 采集收起来源：js实现延迟切换
2015-12-17
记得喝水

1.解决选项卡标题在onmouseover后，不安顺序切换的bug. function changeOption(curIndex){<br> for(var j=0;j<titL.length;j++){<br> titL[j].className="";<br> content[j].className="content";<br> }<br> // 高亮显示当前标题栏<br> titL[curIndex].className="select";<br> content[curIndex].className="show";<br> index=curIndex;//解决选项卡标题在onmouseover后，不安顺序切换的bug.<br> <br> } 2.bug2：解决快速onmouseover时存在的多次调用定时setInterval()存在的bug. 在在执行onmouseout过后添加：if(timer){clearInterval(timer);timer=null;}

查看全部

1 采集收起来源：bug解决及定时器优化
2018-03-22
guangying

function $(id){ return typeof id==='string'?document.getElementById(id):id; } window.onload=function(){ //获取鼠标滑过或点击的标签和要切换内容的元素 var titles=$('notice-tit').getElementsByTagName('li'), divs=$('notice-con').getElementsByTagName('div'); if(titles.length!=divs.length) return; //遍历titles下所有的li for(var i=0;i<titles.length;i++){ titles[i].id = i; titles[i].onmouseover = function(){ //清除所有li上的class for(var j=0;j<titles.length;j++){ titles[j].className = ''; divs[j].style.display = 'none'; } //设置当前为高亮显示 this.className = 'select'; divs[this.id].style.display = 'block'; } } }

查看全部

1 采集收起来源：js实现切换效果
2018-03-22
庄先生和

这个就算背也要背下来吧

查看全部

1 采集收起来源：焦点轮播图效果
2015-10-21
franl

<!doctype html> <html lang="en"> <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(){ // 计时开始

查看全部

1 采集收起来源：编程练习
2018-03-22
Dlie偶尔神隐

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

查看全部

1 采集收起来源：编程练习
2015-08-12
小光头

@@--Tab选项卡切换效果--1-3 tab页面布局-内容布局编辑选项卡内容样式： 1、显示默认内容； 2、隐藏其他内容 3、剩下的留给JS函数实现。

查看全部

1 采集收起来源：tab页面布局-内容布局
2015-08-06
勇敢的半导体

在简单设置图片切换的基础上，加入了图片滑动的动画效果，用到了前面课程中讲到的js动画。记住一个准则：每次setInterval之前一定要先clearInterval！

查看全部

1 采集收起来源：焦点轮播图效果
2015-08-04
妈咪妈咪哄 02:41

切换类型

查看全部

1 采集收起来源：课程简介
2014-10-22
耍流氓的兔兔

滑过切换点击切换延迟切换自动切换

查看全部

1 采集收起来源：课程简介
2015-07-18
Amy_sh

<script type="text/javascript"> window.onload=function(){ // 将所有点击的标题和要显示隐藏的列表取出来 var titles = document.getElementById("menu").getElementsByTagName("p"); var cons = document.getElementById("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++) { cons[j].style.display = 'none'; } cons[this.id].style.display = 'block'; } } } </script>

查看全部

1 采集收起来源：编程练习
2018-03-22
打算卖卷饼的程序员

<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
冷眼罗汉

今天找到问题了，特别注意在让TITLES 索引数目，与内容数据数量一样。我因为在HTML文档中少写一个DIV,导致程序执行到这里，后面的就不执行了。 alert(titles.length)=5 alert(divs.length)=4 然后程序执行到下面一句，就再也不执行了。 if(titles.length!=divs.length) return;

查看全部

1 采集收起来源：js实现切换效果
2015-04-07