欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-25 13:20:28
一: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;}
p,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 p{ 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>
<p style="clear:both;"></p>
</ul>
<p id="bd">
<p>登录内容</p>
<p>注册内容</p>
</p>
<script type="text/javascript">
$(function() {
$("#bd>p:not(:first)").hide(); //取id为bd下面第一个p,并且将不是第一个的隐藏起来
$("#tab li").mouver(function() { //当鼠标移动过id为tab 下面li标签时触发函数
var index = $("#tab li").index(this);//取当前事件时的索引记录在index里面
$(this).addclass("on").siblings().removeclass("on"); //将当前事件上加上样式“on”,并且将兄弟节点的样式全部移除
//siblings()是取到兄弟节
$("#bd>p").eq(index).show().siblings().hide(); //将id为bd下面的第 index个p显示出来,将兄弟隐藏(如:$("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>p:not(:first)").hide();
$("#tab td").mouseover(function() {
var index = $("#tab td").index(this);
$("#bd>p").eq(index).show().siblings().hide();
});
$("#bd a").click(function() {
var link = $("<td><a href='http://www.baidu.com'>百dddd</a></td>");
var links = $("<p><a href='http://www.baidu.com'>sdfsdfsd</a></p>");
$("#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>
<p id="bd">
<p>
<: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>
</p>
<p>
<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>
</p>
<p>
<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>
</p>
<p>
<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>
</p>
</p>
</form>
</body>
</html>