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 相关文章推荐
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
javascript常用经典算法详解
Jan 11 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
详解Angular路由之路由守卫
May 10 Javascript
讲解vue-router之什么是动态路由
May 28 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
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
动态创建类实例代码
2009/10/07 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python读取xlsx的方法
2018/12/25 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
就业推荐表自我鉴定
2014/03/21 职场文书
交通事故协议书
2014/04/15 职场文书
初中生评语大全
2014/04/24 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
学生实习证明范文
2014/09/28 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2015年财政所工作总结
2015/04/25 职场文书