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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
求得div 下 img的src地址的js代码
Feb 28 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jquery实现pager控件示例
Apr 09 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
sails框架的学习指南
Dec 22 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 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
改变Apache端口等配置修改方法
2008/06/05 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
生产内勤岗位职责
2013/12/07 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
食品安全责任书
2014/04/15 职场文书
施工安全生产承诺书
2014/05/23 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
2015年市场营销工作总结
2015/07/23 职场文书