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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
原生JS实现留言板功能
Feb 08 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php发送邮件的问题详解
2015/06/22 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python常用的爬虫技巧总结
2016/03/28 Python
详解Python绘图Turtle库
2019/10/12 Python
python yield和Generator函数用法详解
2020/02/10 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
大学生自荐书范文
2013/12/10 职场文书
手机促销活动方案
2014/02/05 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
七一党日活动总结
2014/07/08 职场文书
奖学金感谢信
2015/01/21 职场文书
市场总监岗位职责
2015/02/11 职场文书
基于python实现银行管理系统
2021/04/20 Python