Tab选项卡切换效果_技术问答

首页免费课 Tab选项卡切换效果问答

Tab选项卡切换效果

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

全部评论问答未解决精华

liuyanxia

索引，非得读成suo ying。。。。。

1 3-1 js实现自动切换实现

2015-09-19

liuyanxia

这代码，太乱了，前面的空格太多了吧，看代码不觉得麻烦吗，

2 1-3 tab页面布局-内容布局

2015-09-19

ruiy

为啥我从上一节模仿着写下来没有bug。。。orz。。。。

0 3-3 bug解决及定时器优化

2015-09-19

ruiy

说的略繁琐了哦，老师

2 3-2 加入手动切换功能及代码优化

2015-09-19

ruiy

叙述过于冗长

4 1-3 tab页面布局-内容布局

2015-09-19

ruiy

啊，一大堆屌丝，啊，哈哈O(∩_∩)O哈！

0 1-2 tab页面布局-标题布局

2015-09-18

这段代码什么意思

+ 我来回答回答最高可+2积分

2 回答 579 浏览 1-2 tab页面布局-标题布局

2015-09-18

求大神指教，为什么我这个没有效果呢

最赞回答 / sixGod

uls[this.id].style.display='block';这句代码应该放在onclick里面

1 回答 971 浏览 1-5 编程练习

2015-09-18

猫咪大神

好啰嗦。。。。。。

0 3-2 加入手动切换功能及代码优化

2015-09-16

赢天下

刚才的发错了。 function dochange(curindex){
for(var i=0;i<list.length;i++){
list[i].className="";
}
list[curindex].className="on";
h=-170*curindex;
pic.style.top=h+"px";
index=curindex;
}
}

0 4-1 焦点轮播图效果

2015-09-15

赢天下

0 4-1 焦点轮播图效果

2015-09-15

赢天下

function autoplay(){
index++
if(index>=list.length){
index=0;
}
dochange(index);
}

0 4-1 焦点轮播图效果

2015-09-15

赢天下

for(var i=0;i<list.length;i++){
list[i].id=i;
list[i].onmouseover=function(){
clearInterval(timer);
dochange(this.id);
}
list[i].onmouseout=function(){
timer=setInterval(autoplay,1000);
}
}
if(timer){
clearInterval(timer);
}
timer=setInterval(autoplay,1000);

0 4-1 焦点轮播图效果

2015-09-15

赢天下

window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
h=0;
timer=null;

0 4-1 焦点轮播图效果

2015-09-15

赢天下

send.onclick=function(){
send.value=times+"秒后重试";
send.disabled="false";
timer=setInterval(js,1000);
}
function js(){
if(times>1){
times-=1;
send.value=times+"秒后重试";
}else{
send.value="发送验证码";
send.disabled="";
clearInterval(timer);
}
}

0 3-4 编程练习

2015-09-15

首页上一页 51 52 53 54 55 56 57 下一页尾页

开始学习

课程须知: 1、您应该已经熟悉html标签和css样式表；2、您还应该已经熟悉JavaScript 或 jQuery的基础知识。

老师告诉你能学到什么？: 您可以举一反三，制作非常精美风格多样的 Tab 切换效果，能够帮助你丰富或改进网站中的选项卡功能的用户体验。

微信扫码，参与3人拼团

热搜

最近搜索清空