jQuery实现简单的tab标签页效果


Posted in Javascript onSeptember 12, 2016

本文实例讲述了jQuery实现简单的tab标签页效果。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab1</title>
<style type="text/css">
*{ padding: 0; margin: 0;}
li{ list-style-type: none;}
body{ margin: 50px;}
.hide{ display: none;}
.tabTitle ul{ overflow: hidden; _height:1px;}
.tabTitle ul li{ float: left; border: 1px solid #abcdef; border-bottom: none; height: 30px; line-height: 30px; padding: 0 15px; margin-right: 3px; cursor:pointer;}
.current{ background: #abcdef; color:#fff;}
.tabContent div{ border: 1px solid #f60; width: 300px; height: 250px; padding: 15px;}
</style>
</head>
<body>
<!-- 这里是标签标题 -->
<div class="tabTitle">
  <ul>
    <li class="current">xhtml</li>
    <li>css</li>
    <li>jquery</li>
  </ul>
</div>
<div class="tabContent">
  <div>xhtml的内容</div>
  <div class="hide">css的内容</div>
  <div class="hide">jquery的内容</div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
  var ali = $('.tabTitle ul li');
  var aDiv = $('.tabContent div');
  var timeId = null;
  ali.mouseover(function(){
    var _this = $(this);
    //setTimeout();的作用是延迟某一段代码的执行
    timeId = setTimeout(function(){
      //$(this)方法属于哪个元素,$(this)就是指哪个元素
      _this.addClass('current').siblings().removeClass('current');
      //如果想用一组元素控制另一组元素的显示或者隐藏,需要用到索引
      var index = _this.index();
      aDiv.eq(index).show().siblings().hide();
    },300);
  }).mouseout(function(){
    //clearTimeout的作用是清除定时器
    clearTimeout(timeId);
  });
});
</script>
</body>
</html>

运行效果图如下:

jQuery实现简单的tab标签页效果

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
前端框架Vue.js中Directive知识详解
Sep 12 #Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 #Javascript
jQuery过滤选择器用法示例
Sep 12 #Javascript
强大Vue.js组件浅析
Sep 12 #Javascript
超详细的JS弹出窗口代码大全
Apr 18 #Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
一个用php实现的获取URL信息的类
2007/01/02 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
javascript 验证日期的函数
2010/03/18 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
理解JS事件循环
2016/01/07 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python-for循环的内部机制
2020/06/12 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
外语学院毕业生的自我鉴定
2013/11/28 职场文书
公务员培训心得体会
2013/12/28 职场文书
大学生创业项目方案
2014/03/08 职场文书
医药营销个人求职信
2014/04/12 职场文书
材料物理专业求职信
2014/09/01 职场文书
助学金感谢信
2015/01/20 职场文书
实习班主任自我评价
2015/03/11 职场文书
员工年度工作总结2015
2015/05/18 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
浅谈Redis缓冲区机制
2022/06/05 Redis