标签在网页中非常常见，可以说是必不可少的元素。其实网上有很多案例讲解tab的方法，都很酷。写这篇文章就是录一个自己手的演示。

两张粗糙的照片。

主要逻辑是找到标签和内容框对应的下标。

html hearteta charset=' utf-8 ' title tab/title script type=' text/JAVAScript ' src=' http : jquery-1 . 10 . 2 . min . js '/script/heart style . tab { width :400 px；高度：400 px；border:1px纯红；}.选项卡菜单{ height:100px宽度width:400pxborder:1px纯灰色；}.选项卡菜单ul { list-style : none；}.选项卡菜单li { display:block宽度：30%；float:leftborder:1px纯蓝；}.tab-box div { width :400 px；高度：300 px；border:1px实心# ff4200display:none}/*显示第一个框*/。tab-box div :第一子{ display : block}/*选择选项卡时更改样式*/。更改{ background:red}/stylescript $()。ready (function () {$(')。tab-menu Li’)。mouse over(function(){//通过。方法，并将其分配给变量var _index=$(this)。index()；//显示内容框的_index号，其他隐藏$('。tab-box div’)。eq (_ index)。显示()。兄弟姐妹()。hide()；//选中时更改选项框的样式，并移除其他选项$ (this)的样式。addclass ('change ')。兄弟姐妹()。remove class(' change ')；});});/script Body div class=' tab ' div class=' tab-menu ' ul Li新服务/li li爆炸服务/li li大服务/Li/ul/div div class=' tab-box ' div 123/div div 456/div 789/div/div/div/Body/html上面，给大家介绍的jquery实现了选项卡切换，详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！