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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 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 彩色文字实现代码
2009/06/29 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python简单实例训练(21~30)
2017/11/15 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
制定岗位职责的原则
2013/11/08 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
教师职称自我鉴定
2014/02/12 职场文书
党性教育心得体会
2014/09/03 职场文书
三下乡活动心得体会
2016/01/23 职场文书
《海上日出》教学反思
2016/02/23 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android