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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
Javascript 布尔型分析
Dec 22 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
使用Vue实现一个树组件的示例
Nov 06 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操作memcache缓存方法分享
2015/06/03 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript实现的listview效果
2007/04/28 Javascript
Javascript Global对象
2009/08/13 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
js单例模式详解实例
2013/11/21 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python中过滤字符串列表的方法
2020/12/22 Python
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
个人能力自我鉴赏
2014/01/25 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书