甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

jquery+css实现Tab栏切换的代码实例

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

成都创新互联公司是一家集网站建设,永胜企业网站建设,永胜品牌网站建设,网站定制,永胜网站建设报价,网络营销,网络优化,永胜网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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

jquery+css实现Tab栏切换的代码实例

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

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

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

HTML：




 
 tab标签
 


 

 
 
 
 

  

  
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

CSS:

.tab-contain{
 margin: 50px auto;
 width: 1000px;
 padding:100px;
 background: #7F7D7D;
}
#tabs {
 overflow: hidden;
 width: 100%;
 margin: 0;
 padding: 0;
 list-style: none;
}
#tabs li {
 float: left;
 margin: 0;
}
li a {
 position: relative;
 background: #ddd;
 padding: 10px 50px;
 float: left;
 text-decoration: none;
 color: #444;
 text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
 border-radius: 20px 20px 0 0;
 box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}

 .current a{
 outline: 0;
 background: #fff;
  z-index: 4;
}
.hoverItem a{
 background: #AAC8B9;
}
#content {
 background: #fff;
 padding: 50px;
 height: 220px;
 position: relative;
 border-radius: 0 5px 5px 5px;
 box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
.item{
 display: none;
}

.show{
 display: block;
}

JS:

 $(function(){
  $('#tabs a').click(function(e) {
   e.preventDefault();    
   $('#tabs li').removeClass("current").removeClass("hoverItem");
   $(this).parent().addClass("current");
   $("#content div").removeClass("show");
   $('#' + $(this).attr('title')).addClass('show');
  });

  $('#tabs a').hover(function(){
  if(!$(this).parent().hasClass("current")){
   $(this).parent().addClass("hoverItem");
  }
  },function(){
  $(this).parent().removeClass("hoverItem");
  });
 });

以上所述是小编给大家介绍的jquery css实现Tab栏切换详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！


本文标题：jquery+css实现Tab栏切换的代码实例
文章转载：http://chengdu.cdxwcx.cn/article/iiohpp.html

其他资讯