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

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