网页效果：jquery实现tab选项卡功能.pdfVIP

网页效果：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