基于jquery实现最简单的选项卡切换效果

这个功能在目前的网站中被广泛使用，它以标签的形式对一些内容进行分类。比如下面的天猫商城。

下面的源代码是仿照天猫写的一个标签，达到的效果如下。

主要是利用我们点击时触发对应板块的点击事件，然后在点击事件中显示和隐藏tabbox中对应的项目。

同时，悬停用于添加鼠标滑动的效果。

代码：

！DOCTYPE html html lang=' en ' xmlns=' http://www . w3 . org/1999/XHTML ' head meta charset=' utf-8 '/link href=' CSS/style 1 . CSS ' rel='样式表' type=' text/CSS '/script src=' http 3360 jquery-1 . 3 . 2 . min . js '/script title/title script $(function(){ var $ div _ Li=$(' div . tab _ js)$div_li.click(function () {//定义tan_menu对应的click事件，即类别的click事件。$(这个)。addClass('选定')。兄弟姐妹()。removeClass('选定')；var index=$ div _ Li . index(this)；$('div.tab_boxdiv ')。eq(指数)。显示()。兄弟姐妹()。hide()；}).hover(function () {//定义鼠标悬停特效$(this)。addClass('悬停')；}，function () { $(this)。removeClass('悬停')；});});/script/head body Div class=' tab ' Div class=' tab _ menu ' ul Li class=' selected '时事/li li体育/li li娱乐/Li/ul/Div Div class=' tab _ box ' Div时事/Div class=' hide '体育/Div class=' hide '娱乐/div /div/body/html以上就是本文的全部内容，希望能帮助大家掌握切换制表符的技巧。