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
                                逻辑清晰

最热最新

qq_愈见晨型_0

window.onload=function(){ // 将所有点击的标题和要显示隐藏的列表取出来 var menu=document.getElementById("menu"); var div=document.getElementById("menu").getElementsByTagName("div"); var p=document.getElementById("menu").getElementsByTagName("p"); var ul=document.getElementById("menu").getElementsByTagName("ul"); // 遍历所有要点击的标题且给它们添加索引及绑定事件 // if(ul.length!=p.length){return;} for(i=0;i<p.length;i++){ p[i].id=i; p[i].onclick = function(){ for(j=0;j<p.length;j++){ ul[j].style.display="none"; } ul[this.id].style.display="block"; // 获取点击的标题上的索引属性，根据该索引找到对应的列表 } // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来 } }

查看全部

0 采集收起来源：编程练习
2018-03-22
psmaster

放图片的ul的top值=-index*单张图片的高度（所有图片必须等高）...为什么大家还是写的display...

查看全部

0 采集收起来源：焦点轮播图效果
2016-06-19
慕雪3254991 13:24

nav

查看全部

0 采集收起来源：tab页面布局-标题布局
2016-06-15
xueyicui

132

查看全部

0 采集收起来源：加入手动切换功能及代码优化
2016-06-13
xueyicui 12:23

123

查看全部

0 采集收起来源：js实现自动切换实现
2016-06-13
xueyicui 17:44

320

查看全部

0 采集收起来源：js实现延迟切换
2016-06-12
xueyicui 11:37

123

查看全部

0 采集收起来源：js实现延迟切换
2016-06-12
xueyicui 11:58

123

查看全部

0 采集收起来源：js实现切换效果
2016-06-12
蛋蛋英

<!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(){ send.disabled='true'; timer=setInterval(changeTime,1000) ; } function changeTime(){ send.value=times+'秒后重发'; times--; if(times==-1){ clearInterval(timer); timer=null; send.value='发送验证码'; times=60; send.disabled=''; } } } </script> </head> <body> <input type="button" id="send" value="发送验证码"> </body> </html>

查看全部

0 采集收起来源：编程练习
2018-03-22
亚特兰大 03:13

Tab切换类型

查看全部

0 采集收起来源：课程简介
2016-06-01
qq_换个网名_1 01:18

类型1

查看全部

0 采集收起来源：课程简介
2016-05-27
我乐意 01:16

tab切换类型

查看全部

0 采集收起来源：课程简介
2016-05-27
weibo_流离1世_03219725

点击标题时判断该标题下的菜单是否显示，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来。 window.onload=function(){ // 将所有点击的标题和要显示隐藏的列表取出来 var menu=document.getElementById("menu"); var p =menu.getElementsByTagName("p"); var ul =menu.getElementsByTagName("ul"); if(p.length=ul.length){ // 遍历所有要点击的标题且给它们添加索引及绑定事件 for(i=0;i<p.length;i++){ p[i].id=i; // 获取点击的标题上的索引属性，根据该索引找到对应的列表 p[i].onclick=function(){ // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来 if(ul[this.id].style.display=="block"){ ul[this.id].style.display="none" } else{ ul[this.id].style.display="block" } } }}}

查看全部

1 采集收起来源：编程练习
2018-03-22
qq_艾米_3

忘了再回来看。。。默认一个ul的状态是block的，点击另外一个p时，p对应的ul的display="block",其他的ul的display状态变为"none"即为关闭状态，这个效果怎么实现？

查看全部

0 采集收起来源：编程练习
2018-03-22
qq_艾米_3

学习下

查看全部

0 采集收起来源：编程练习
2016-05-25