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


Posted in Javascript onDecember 11, 2013

一: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>

二:Tab效果和动态加载
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#bd>div:not(:first)").hide();
$("#tab td").mouseover(function() {
var index = $("#tab td").index(this);
$("#bd>div").eq(index).show().siblings().hide();
});
$("#bd a").click(function() {
var link = $("<td><a href='http://www.baidu.com'>百dddd</a></td>");
var links = $("<div><a href='http://www.baidu.com'>sdfsdfsd</a></div>");
$("#tab").append(link); //向id为tab下面追加link
$("#bd").append(links); //向id为bd下面追加links
});
});
</script>
<style type="text/css">
#tab li.on
{
background: #3CF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr id="tab">
<td>
<a href="http://www.baidu.com">百度</a>
</td>
<td>
<a href="http://www.cnblogs.com">博客园</a>
</td>
<td>
<a href="http://www.hao123.com">好123</a>
</td>
<td>
<a href="http://www.163.com">163</a>
</td>
</tr>
</table>
<div id="bd">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<%#Eval("StationName") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
asfa
</HeaderTemplate>
<ItemTemplate>
<%#Eval("StationName")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
azsac
</HeaderTemplate>
<ItemTemplate>
<%#Eval("StationName")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
azsac
</HeaderTemplate>
<ItemTemplate> 
<a href="#">
<%#Eval("StationName")%></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Business" HeaderText="Business"/>
<asp:BoundField DataField="Status" HeaderText="Status"/>
<asp:BoundField DataField="Certificate" HeaderText="Certificate"/>
</Columns>
</asp:GridView>
</div>
<div>
<asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Business" HeaderText="Business"/>
<asp:BoundField DataField="Business" HeaderText="Business"/>
<asp:BoundField DataField="Business" HeaderText="Business"/>
<asp:BoundField DataField="Business" HeaderText="Business"/>
<asp:BoundField DataField="Status" HeaderText="Status"/>
<asp:BoundField DataField="Certificate" HeaderText="Certificate"/>
</Columns>
</asp:GridView>
</div>
<div>
<asp:GridView ID="GridView4" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Business" HeaderText="Business"/>
<asp:BoundField DataField="Status" HeaderText="Status"/>
<asp:BoundField DataField="Certificate" HeaderText="Certificate"/>
<asp:BoundField DataField="Status" HeaderText="Status"/>
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
如何在JavaScript中等分数组的实现
Dec 13 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 #Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 #Javascript
javascript弹出层输入框(示例代码)
Dec 11 #Javascript
深入理解javascript中defer的作用
Dec 11 #Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 #Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 #Javascript
jquery动态加载select下拉框示例代码
Dec 10 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
JavaScript 参考教程
2006/12/29 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python语言快速上手学习方法
2018/12/14 Python
python实现文字版扫雷
2020/04/24 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
大学生应聘自荐信
2013/10/11 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Spring中的@Transactional的工作原理
2022/06/05 Java/Android