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

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

Tab选项卡切换效果

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

最热最新

qq_郑岚_0

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
душа 00:14

滑过，点击，延迟，移动切换

查看全部

1 采集收起来源：tab页面布局-标题布局
2018-03-22
周瑶_0001

湖南哈哈

查看全部

1 采集收起来源：课程简介
2018-03-22
balluchone 09:03

加边框时防止溢出

查看全部

1 采集收起来源：tab页面布局-标题布局
2017-03-08
天天开心开心天天开心天天开心天天开心 00:09

好

查看全部

1 采集收起来源：课程简介
2018-03-22
scbzyj 18:29

JavaScript合理使用this哦

查看全部

1 采集收起来源：js实现延迟切换
2018-03-22
Geeker哞哞

window.onload=function(){ var a = document.getElementById('menu'); var div = a.getElementsByTagName('div'); var p = a.getElementsByTagName('ul'); // 将所有点击的标题和要显示隐藏的列表取出来 for(var i=0 ; i<div.length; i++){ div[i].index = i; div[i].onclick= function(){ for(var j=0; j<div.length; j++){ p[j].style.display = 'none'; } p[this.index].style.display= 'block'; } }

查看全部

1 采集收起来源：编程练习
2018-03-22
又来学习啦

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

查看全部

1 采集收起来源：编程练习
2018-03-22
ethanweb

那个string？是什么意思？

查看全部

1 采集收起来源：js实现切换效果
2016-07-13
实心卤蛋 17:11

解决办法是：在定时器外部定义this指向li，然后再在定时器内部进行调用

查看全部

1 采集收起来源：js实现延迟切换
2015-01-02
实心卤蛋 14:51

排查错误的思路：问题可能出现在this或者id上，经过试验发现id是没问题的，所以就是在this上，alert发现this指向了window。

查看全部

1 采集收起来源：js实现延迟切换
2015-01-02
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
is陈小黑

焦点图轮播效果。

查看全部

0 采集收起来源：焦点轮播图效果
2014-12-17
is陈小黑

实现点击“发送验证码”按钮后，按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态

查看全部

0 采集收起来源：编程练习
2014-12-17
is陈小黑

点击标题时判断该标题下的菜单是否显示，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来。

查看全部

0 采集收起来源：编程练习
2014-12-17