网页效果：jquery实现tab选项卡功能前言：Tab选项卡效果是常见的网页效果，基本上是任何网站都可以看到这种栏目切换的效果，关于tab实现的方式有很多，不过总的来说原理都是一致的，都是通过鼠标事件进行触发相应的功能函数，实现相关栏目的切换。大家需要简单的了解相关的HTML和CSS知识，同时了解jquery对应事件原理即可。
提醒：不管实习什么样式效果，首先需要将对于的样式代码写好，jquery效果用对应的事件进行触发即可！简单演示：用下面样式效果进行说明！
Tab选项卡操作实例：第一步：用相关网页编辑工具新建一个项目文件，名称自己随便定义如tab第二部：新建一个空白的HTML文档和一个CSS文档
第三部：插入jquery库和关联对应的css文档第四步：做好tab选项卡的网页布局Html:菜单一
菜单二菜单三显示内容一显示内容二显示内容三显示内容四代码解释：div+.box代表最外层盒子Ul+li+.tab代表tab的选项卡
Ul+li+box_content代表tab选项卡对应的切换内容
第五步：对于的css样式设置{margin:0;padding:0;}/边框清零/.box{width:300px;/宽度设置/height:200px;/高度设置/margin:0auto;/盒子居中/margin-top:80px;/据顶部/border:solid1px#080;/边框样式/border-radius:3%;/边框边缘圆角/}.tabli{width:100px;/宽度设置/float:left;/浮动设置左浮动/
list-style:none;/li标签默认序列样式清除/text-align:center;/文本居中/padding:10px0;/内边距，即文字到边框上下左右的距离/}.tabli.one{border-bottom:solid/实线/2px/宽度/#008800/颜色/;/下边框样式设置，/}.box_content{width:300px;/宽度设置/height:200px;/高度设置/border-top:solid1px#008800;/上边框样式/
overflow:hidden;/超出隐藏/}.box_contentli{width:300px;/宽度设置/height:200px;/高度设置/list-style:none;/默认li标签默认序列样式清除/}
第六步：tab事件源，事件，功能函数确定tab事件源：为tab选项卡，即class为tab,下面的li标签元素事件：常规的鼠标事件，可以是点击click/hover/mouseup/mouseover/mouseennter等。执行的功能函数：为栏目内容切换，为tab选项卡，即class为box_content,下面的li标签元素Jquery:代码解释：$(".box.box_contentli")，遍历找出所有的li元素hide()：隐藏show()：展示eq(0)：找到第一个元素Click（）：点击事件，这里的事件可以按照需要进行切换addClass("one")：添加css样式removeClass("one"):移除样式siblings()：遍历同级兄弟元素
index()：获取序列号，序列号重0开始
效果图：开始：
点击菜单二：
点击菜单三：
总结：只需要先将对于的样式写好后，一一对照事件写出实现的效果即可！
|
|
