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翻页效果
Jul 23 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
JS验证码实现代码
Sep 14 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
JS实现滑动导航效果
Jan 14 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 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
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python实现简单的可逆加密程序实例
2015/03/05 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
快递业务员岗位职责
2014/01/06 职场文书
招聘专员岗位职责
2014/03/07 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
六查六看心得体会
2014/10/14 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书