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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
ReactNative中使用Redux架构总结
2017/12/15 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python使用chardet判断字符编码
2015/05/09 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python新手如何理解循环加载模块
2020/05/29 Python
如何用python批量调整视频声音
2020/12/22 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
纬创Java面试题笔试题
2014/10/02 面试题
财务科科长岗位职责
2014/03/10 职场文书
商业房地产广告语
2014/03/13 职场文书
工伤赔偿协议书
2014/04/15 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
python数据处理之Pandas类型转换
2022/04/28 Python