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 相关文章推荐
ie与ff下的event事件使用介绍
Nov 25 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
Node.js编码规范
Jul 14 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
解决vue中的无限循环问题
Jul 27 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 设计模式之 单例模式
2008/12/19 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
名片管理系统python版
2018/01/11 Python
python实现换位加密算法的示例
2018/10/14 Python
python从子线程中获得返回值的方法
2019/01/30 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python制作词云图代码实例
2019/09/09 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
社会实践感言
2014/01/25 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
积极向上的团队口号
2014/06/06 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
标准发言稿结尾
2019/07/18 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis
正则表达式基础与常用验证表达式
2022/06/16 Javascript