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 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
jQuery聚合函数实例
May 21 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JS常用知识点整理
2017/01/21 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
Js和VUE实现跑马灯效果
2020/05/25 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python读写docx文件的方法
2018/05/08 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Django异步任务线程池实现原理
2019/12/17 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
护理自荐信范文
2013/10/05 职场文书
中专生自我鉴定
2013/12/17 职场文书
办公室助理岗位职责
2013/12/25 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
比赛主持人开场白
2015/05/29 职场文书
学校团代会开幕词
2016/03/04 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技