网页效果：jquery实现tab选项卡功能.pdf
文本预览下载声明
网页效果：jquery 实现tab 选项卡功能
前言：
Tab选项卡效果是常见的网页效果，基本上是任何网站都可以看到这种栏目切换的效果，
关于 实现的方式有很多，不过总的来说原理都是一致的，都是通过鼠标事件进行触
tab
发相应的功能函数，实现相关栏目的切换。
大家需要简单的了解相关的 和 知识，同时了解 对应事件原理即可。
HTML CSS jquery
提醒：不管实习什么样式效果，首先需要将对于的样式代码写好，jquery 效果用对应的
事件进行触发即可！
简单演示：用下面样式效果进行说明！
Tab 选项卡操作实例：
第一步：用相关网页编辑工具新建一个项目文件，名称自己随便定义如tab
第二部：新建一个空白的HTML 文档和一个CSS 文档
第三部：插入jquery 库和关联对应的css 文档
第四步：做好tab 选项卡的网页布局
Html:
div class=box
ul class=tab
li class=one菜单一/li
li菜单二/li
li菜单三/li
/ul
ul class=box_content
li显示内容一/li
li显示内容二/li
li显示内容三/li
li显示内容四/li
/ul
/div
代码解释：div+.box 代表最外层盒子
Ul+li+.tab 代表tab 的选项卡
Ul+li+box_content 代表tab 选项卡对应的切换内容
第五步：对于的css 样式设置
*{margin: 0;padding: 0;} /*边框清零*/
.box{
width: 300px; /*宽度设置*/
height: 200px;/*高度设置*/
margin: 0 auto;/*盒子居中*/
margin-top: 80px;/*据顶部*/
border: solid 1px #080;/*边框样式*/
border-radius: 3%; /*边框边缘圆角*/
}
.tab li{
width: 100px;/*宽度设置*/
float: left;/*浮动设置左浮动*/
list-style: none;/*li 标签默认序列样式清除*/
text-align: center;/*文本居中*/
padding: 10px 0;/*内边距，即文字到边框上下左右的距离*/
}
.tab li.one{
border-bottom: solid/*实线*/ 2px/*宽度*/ #008800/*颜色
*/;/*下边框样式设置，*/
}
.box_content{
width: 300px;/*宽度设置*/
height: 200px;/*高度设置*/
border-top: solid 1px #008800;/*上边框样式*/
overflow: hidden;/*超出隐藏*/
}
.box_content li{
width: 300px;/*宽度设置*/
h
显示全部