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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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调用mysql数据 dbclass类
2011/05/07 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
python内存管理分析
2015/04/08 Python
python安装与使用redis的方法
2016/04/19 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
新手学python应该下哪个版本
2020/06/11 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
C#的几个面试问题
2016/05/22 面试题
高中英语教学反思
2014/02/04 职场文书
股东授权委托书范文
2014/09/13 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
黄山导游词
2015/01/31 职场文书