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数组详解
Oct 22 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
JavaScript实现瀑布流图片效果
Jun 30 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
深入探讨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中使用Select 查询语句的实例
2014/02/19 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
javascript编程起步(第五课)
2007/01/10 Javascript
Add a Formatted Table to a Word Document
2007/06/15 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jquery增加和删除元素的方法
2015/01/14 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
使用python实现名片管理系统
2020/06/18 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
Android面试题及答案
2015/09/04 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
大学军训感言1500字
2014/03/09 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android