jquery+css实现Tab栏切换的代码实例-创新互联

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

成都创新互联公司于2013年成立，先为新县等服务建站，新县等地企业，进行企业商务咨询服务。为新县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

（1）点击tab栏显示对应的内容，并且tab栏样式变化。实现方式：一般tab栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用css设置样式。然后为每个tab绑定click事件，当触发click事件时，对应的内容div的display设置block，否则设置为none。

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

完整代码如下（代码下载地址）：

HTML：

 
 
 


 

 
 

  
One
  
Two
  
Three
  
Four
 
 
 

  

  
title 11111
  
text here!!!text here!!!text here!!!text here!!!text here!!!
  
text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!
  
  

  
title 2222
  
text here!!!text here!!!text here!!
  
text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!
  
  

  
title 33333
  
text here!!!
  
text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!
  
  

  
title 44444
  
text here!!!text here!!!text here!!!text here!!!text here!!!
  
text here!!!text 
  
 
 

 
 

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：jquery+css实现Tab栏切换的代码实例-创新互联
网页网址：http://cdiso.cn/article/hgogs.html