jquery css实现标签栏切换的代码实例

前几天面试碰到现场给写一个标签栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。

最终要实现的效果图如下：

(1)点击标签栏显示对应的内容，并且标签栏样式变化。实现方式：一般标签栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用钢性铸铁设置样式。然后为每个标签绑定点击事件，当触发点击事件时，对应的内容差异的显示设置街区，否则设置为没有。

(2)当鼠标悬停在没有选中的标签栏上时，改变样式，移开时又恢复回来的样式。如果标签栏已选中，则鼠标是否悬停不影响样式。实现方式：为标签栏添加盘旋事件，当鼠标进入时，判断该标签栏是不是被选中（可以为了选中的标签栏设置一个同学们，只需要判断是否含有该班级即可),在不选中的情况下再添加盘旋的样式。

完整代码如下（代码下载地址):

HTML:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '/title选项卡标签/title link href=' CSS/style。CSS ' rel='外部无跟随'类型=' text/CSS ' rel='样式表/headbody div class='tab-contain '！-标签栏-ul id=' tab ' Li class=' current ' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' tab 1 ' One/a/Li lia href=' # rel='外部nofollow ' rel='外部nofollow ' rel='外部no follow ' title=' tab 2 ' Two/a/Li lia href=' # ' rel='外部nofollow ' rel ' rel='外部nofollow '-对应显示内容-div id=' content ' div id=' tab 1 ' class=' item show ' H2 title 11111/H2 ptext在此！这里发短信！这里发短信！这里发短信！这里发短信！/p这里是ptext！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！/p/div div id=' tab 2 ' class=' item ' H2 title 2222/H2 ptext在此！这里发短信！这里发短信！/p这里是ptext！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！/p/div div id=' tab 3 ' class=' item ' H2 title 33333/H2 ptext在此！/p这里是ptext！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！这里发短信！/p/div div id=' tab 4 ' class=' item ' H2标题44444/H2 ptext在此！这里发短信！这里发短信！这里发短信！这里发短信！/p这里是ptext！文本/p /div /div /div脚本src=' http :http://libs。百度。com/jquery/1。10 .2/jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js。js /脚本/body/htmlCSS:选项卡-包含{ margin: 50px auto宽度： 1000像素；padding:100px背景# 7F7D7D} #选项卡{ overflow:隐藏；宽度： 100%;保证金： 0；padd : 0；列表样式：无；} #制表符li {左浮动：保证金： 0；}阿利{位置：相对；背景# dddpadding: 10px 50px向左浮动：文本装饰：无；color : # 444 text-shadow : 0 1px 0 rgba(255，255，255，8);边界半径： 20px 20px 0 0box-shadow: 0 2px 2px rgba(0，0，0，4);} .当前a { outline : 0；背景# fffz-index : 4；}.悬停项目a { background: # AAC8B9} #内容{ background : # fffpadding : 50px高度： 220 px相对位置：边框半径： 0 5px 5px 5px箱形阴影： 0-2px 3px-2px rgba(0，0，0，5);}.项目{显示：无；}.显示{显示：块；}JS:

$(function(){ $(“# tab a”)).单击（函数(e){ e . prevent default()；$(' # tab Li ').removeClass(“”当前')。移除CLaSS(' HeaLTH ITeM ')；$(这个)。父项()。添加CLaSS(' current ')；$(“# content div”).移除类(' show ')；$('#' $(这个).attr(标题).添加CLaSS(' show ')；});$(' #制表符a ').hover(function(){ if(！$(这个)。父项()。有类(' current '){ $(this).父项()。添加CLaSS(' HeaLTH ITeM ')；} }，function(){ $(this).父项()。移除CLaSS(' HeaLTH ITeM ')；});});以上所述是小编给大家介绍的jquery css实现标签栏切换详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！