jQuery实现简单的tab标签页效果
更新时间：2016年09月12日 15:20:59 作者：onestopweb
这篇文章主要介绍了jQuery实现简单的tab标签页效果,涉及jQuery简单元素遍历与样式动态操作相关技巧,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
使用jquery最重要的就是熟悉它的属性，方法等，下面总结的真不错，经常用的都总结出来了2008-06-06
本文为大家详细介绍喜爱页面载入完毕响应事件、绑定与反绑定事件监听器、事件触发器、事件的交互处理等等，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
这篇文章主要介绍了jquery trigger函数执行两次的解决方法,详细分析了trigger函数执行两次的原因与响应的解决技巧,非常具有实用价值,需要的朋友可以参考下2016-02-02
这篇文章主要为大家详细介绍了jQuery版AJAX简易封装代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
本文给大家介绍的是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。2015-07-07
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果2011-08-08
jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，r
这篇文章主要介绍了jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的应用的相关资料,需要的朋友可以参考下2016-01-01
基于jquery实现的文章自定义分段显示，如果文章内容太多的话转换有点慢，大家若喜欢的话，可以参考下2014-05-05
查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。2011-02-02
这篇文章主要介绍了JQuery 在线引用及测试引用是否成功的示例,需要的朋友可以参考下2014-06-06
最新评论