HTML5+CSS3+JavaScript Web前端开发案例教程课件：Tab选项卡切换.pptxVIP

Tab选项卡切换

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：Tab选项卡切换核心功能：选项卡头部标签高亮选项卡切换事件

案例介绍Tab选项卡切换效果

02技术准备

技术准备jQuery显示与隐藏方法显示和隐藏效果是在做网页设计时常用的特效之一，一般会用于导航栏的二级导航，或者是其他需要鼠标悬停效果的一些元素。jQuery提供了show()、hide()、toggle()函数，分别实现了元素的显示、隐藏、切换的效果，提高了开发效率。

技术准备show()方法：show()方法用于显示被匹配的正在处于隐藏状态的元素，无论这个元素是通过hide()方法隐藏的还是在CSS里设置了“display:none;”，show()方法都将有效。通常show()方法配合hide()方法一起使用。

技术准备show()方法示例代码：$(selector).show(speed,callback);how()方法有两个参数，参数1用于规定元素显示的速度，单位是毫秒，也可以用“slow”、“fast”关键词代替；参数2是回调函数，当显示效果完成后执行。

技术准备hide()方法：hide()方法用于隐藏被匹配的正在处于显示状态的元素，如果选择的元素是隐藏的，这个方法将不会改变任何元素。通常hide()方法配合show()方法一起使用。

技术准备hide()方法示例代码：$(selector).hide(speed,callback);hide()方法的参数与show()方法类似，参数1用于规定元素隐藏的速度，参数2为元素隐藏效果完成后执行的回调函数。

技术准备toggle()方法：toggle()方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。在没有使用toggle()方法之前，要想实现显示和隐藏的切换效果，需要把show()和hide()两个方法一起使用。

技术准备toggle()方法示例代码：$(selector).toggle(speed,callback);toggle()方法的参数与hide()、show()方法类似，数1用于规定元素隐藏的速度，参数2为元素隐藏效果完成后执行的回调函数。

技术准备jQuery显示与隐藏效果

03案例实现

案例实现文件结构：