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对class属性的操作实现按钮开关效果
Oct 11 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
浅析Vue 生命周期
Jun 21 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
网吧消防安全制度
2014/01/28 职场文书
村党支部书记承诺书
2014/05/29 职场文书
图书馆标语
2014/06/19 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2014年工人工作总结
2014/11/25 职场文书
简历自我评价优缺点
2015/03/11 职场文书
独生子女证明范本
2015/06/19 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python