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

更新时间：2019年05月14日 15:47:47 作者：诗渊

这篇文章主要介绍了jquery css实现Tab栏切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

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

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

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

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>tab标签</title>
 <link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet">
</head>
<body>
 <div class="tab-contain">
 <!-- tab栏 -->
 <ul id="tabs">
  <li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">One</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab2">Two</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab3">Three</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab4">Four</a></li>
 </ul>
 <!-- 对应显示内容 -->
 <div id="content">
  <div id="tab1" class="item show">
  <h2>title 11111</h2>
  <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  </div>
  <div id="tab2" class="item">
  <h2>title 2222</h2>
  <p>text here!!!text here!!!text here!!</p>
  <p>text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!</p>
  </div>
  <div id="tab3" class="item">
  <h2>title 33333</h2>
  <p>text here!!!</p>
  <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  </div>
  <div id="tab4" class="item">
  <h2>title 44444</h2>
  <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
  <p>text here!!!text </p>
  </div>
 </div>
 </div>

 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript" src="js.js"></script>
</body>
</html>

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
Tab

JQuery UI DatePicker中z-index默认为1的解决办法
用到JQuery UI的DatePicker时，发现如果页面有其他z-index比较大的控件，datepicker就会被遮住而不能操作。
2010-09-09
jQuery实现产品对比功能附源码下载
一些电商网站产品或评测网站会为用户提供产品对比的功能，用户只需勾选多个需要对比的产品，就可以进行比对,下文给大家带来了jQuery实现产品对比功能，一起看下吧
2016-08-08
jQuery 渐变下拉菜单
利用jQuery来实现，其实就几行代码的事。即便如此，由于js语言的思维方式，还是一直没有把握好，加上一个css的问题，导致弄了好久才出来效果。
2009-12-12
jquery+ajax实现跨域请求的方法
这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下
2015-01-01
JQuery中DOM实现事件移除的方法
这篇文章主要介绍了JQuery中DOM实现事件移除的方法,涉及jQuery中unbind方法移除事件绑定的相关技巧,需要的朋友可以参考下
2015-06-06
浅谈jQuery中ajaxPrefilter的应用
下面小编就为大家带来一篇浅谈jQuery中ajaxPrefilter的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
jquery和雅虎的yql服务实现天气预报服务示例
本文介绍一个利用Jquery和雅虎的YQL服务实现天气预报功能,需要的朋友可以参考下
2014-02-02
基于jquery实现瀑布流布局
这篇文章主要介绍了基于jquery实现瀑布流布局的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12
各式各样的导航条效果css3结合jquery代码实现
这篇文章主要为大家分享了css3结合jquery代码实现各式各样的导航条效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
jquery提升性能最佳实践小结
因为jquery的易用性，很多朋友使用jquery，但仍然需要注意的是性能的问题，下面是曾祥展特为大家整理的一些技巧。
2010-12-12