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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP Directory 函数的详解
2013/03/07 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Django 内置权限扩展案例详解
2019/03/04 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
PyTorch基本数据类型(一)
2019/05/22 Python
纬创Java面试题笔试题
2014/10/02 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
高一英语教学反思
2014/01/22 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
小学教师个人总结
2015/02/05 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js