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

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

Tab选项卡切换效果

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

全部评论问答未解决精华

慕客学渣会总瓢把子3201537

我就感觉挺简单的一个选项卡，搞的好复杂。

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

2016-07-26

qq_奈奈奈_03699702

整个容器宽度/Tab数量=盒子的整体宽度（width+padding+margin)：300/5=60,当为选中状态时，有个2px的border，得此时的width=60-58，即所有Tabs的width为58px,一旦选中就有2px的border。那么，假设当大家没有没有选中，且width=58px,剩下的2px应该由padding来填充。对-1px和301px持保留意见

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

2016-07-25

海风yzx

老师讲的思路非常好，很符合初学者，适当的错误的演示也很好，赞赞赞！

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

2016-07-25

不二的嫁衣

老师讲的很好，我之前写的时候只是在基础上加了定时器，所以出现在了错误，var that = this; 提示了我，谢谢老师

1 2-1 js实现延迟切换

2016-07-21

阿柴chai

真心棒，我是第二次看，第一次看的时候半懂，现在完全搞清楚了，讲的好的我都想骂人了。真心好，又仔细。他妈的太棒啦。我太激动啦

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

2016-07-18

慕桂英2847998

讲真的，这个效果跟Tab切换没什么本质上的区别。

0 1-5 编程练习

2016-07-15

qq_放心飞吧_0

在样式上花费了很多时间其实重点不是选项卡的切换吗？讲这么多还没有讲到重点...

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

2016-07-12

lesses

开头的代码如果不清楚的话就不用纠结了，自己按照正常定义变量的方法做就好了

0 1-4 js实现切换效果

2016-07-09

漂流de海浪

鼠标移到下面内容停止切换，在for循环里面绑定事件。
for(var i=0; i<lis.length; i++){
lis[i].id=i;
//绑定div鼠标事件
divs[i].onmouseover=function(){
clearInterval(timer);
}
divs[i].onmouseout=function(){
timer = setInterval(autochange,1000);
}

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

2016-07-08