管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jquery Tab效果和动态加载的简单实例

　　一：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>

教程首页 更多教程