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


Posted in jQuery onMay 14, 2019

前几天面试碰到现场给写一个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:

<!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 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
jquery 验证用户名是否重复代码实例
May 14 #jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
JQuery animate动画应用示例
May 14 #jQuery
jquery实现选项卡切换代码实例
May 14 #jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP 类型转换函数intval
2009/06/20 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
django反向解析和正向解析的方式
2018/06/05 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
个人简历自我评价
2014/01/06 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
董事长助理岗位职责
2015/02/11 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Go遍历struct,map,slice的实现
2021/06/13 Golang
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang