Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery Tab效果和动态加载的简单实例

jquery Tab效果和动态加载的简单实例

发布时间:2014-05-24   编辑:www.jquerycn.cn
这篇文章主要是对jquery中Tab效果和动态加载的简单实例进行了介绍,需要的朋友可以过来参考下。希望对大家有所帮助

一:tab效果显示

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<style>
html{ font-size:12px;}
body{ margin:50px;}
div,ul,li{ margin:0; padding:0;}
#tab{ width:200px; margin-top:20px;}
#tab li{ float:left; height:20px; line-height:20px; border:1px solid #000; list-style:none; padding:3px 6px;}
#tab li.on{ background:#3CF;}
#bd div{ width:198px; border:1px solid #000; height:100px; text-align:center; line-height:100px;background:#3CF;}
#links a{ margin-right:10px;}
</style>
</head>
<body>
<span id="links"><a href="#">登录</a><a href="#">注册</a></span>
<ul id="tab">
<li class="on">登录</li>
<li>注册</li>
<div style="clear:both;"></div>
</ul>
<div id="bd">
<div>登录内容</div>
<div>注册内容</div>
</div>
<script type="text/javascript">
$(function() {
$("#bd>div:not(:first)").hide(); //取id为bd下面第一个div,并且将不是第一个的隐藏起来
$("#tab li").mouseover(function() { //当鼠标移动过id为tab 下面li标签时触发函数
var index = $("#tab li").index(this);//取当前事件时的索引记录在index里面
$(this).addClass("on").siblings().removeClass("on"); //将当前事件上加上样式“on”,并且将兄弟节点的样式全部移除
//siblings()是取到兄弟节
$("#bd>div").eq(index).show().siblings().hide(); //将id为bd下面的第 index个div显示出来,将兄弟隐藏(如:$("p:eq(1)")意思是”选择第二个 <p> 元素“)
});
// $("#links a").mouseover(function() {
// var index = $("#links a").index(this);
// $("#tab li").eq(index).trigger("click");
// });
});
</script>
</body>
</html>

您可能感兴趣的文章:
jquery Tab效果和动态加载的简单实例
用jQuery打造TabPanel效果代码
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
jQuery的Tab插件 Tabtastic
基于JQuery的6个Tab选项卡插件
jquery实现鼠标拖动图片效果示例代码
用jquery等比例控制图片宽高的具体实现
Jquery uploadify图片上传插件无法上传的解决方法
jquery动态加载js三种方法实例
jQuery plugin for autocomplete

关键词: jquery  动态加载  Tab   
[关闭]