jquery Tab效果和動態(tài)加載的簡單實(shí)例
一：tab效果顯示
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>無標(biāo)題頁</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>登錄內(nèi)容</div>
<div>注冊內(nèi)容</div>
</div>
<script type="text/javascript">
$(function() {
$("#bd>div:not(:first)").hide(); //取id為bd下面第一個div，并且將不是第一個的隱藏起來
$("#tab li").mouseover(function() { //當(dāng)鼠標(biāo)移動過id為tab 下面li標(biāo)簽時觸發(fā)函數(shù)
var index = $("#tab li").index(this);//取當(dāng)前事件時的索引記錄在index里面
$(this).addClass("on").siblings().removeClass("on"); //將當(dāng)前事件上加上樣式“on”,并且將兄弟節(jié)點(diǎn)的樣式全部移除
//siblings()是取到兄弟節(jié)
$("#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效果和動態(tài)加載
<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 );
var links = $("<div><a ).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 >百度</a>
</td>
<td>
<a >博客園</a>
</td>
<td>
<a >好123</a>
</td>
<td>
<a >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>
相關(guān)文章
以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題
Promises是一種令代碼異步行為更加優(yōu)雅的抽象，它很有可能是JavaScript的下一個編程范式，一個Promise即表示任務(wù)結(jié)果，無論該任務(wù)是否完成。本文以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題，需要的朋友參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery圖片切換動畫特效,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
jquery對Json的各種遍歷方法總結(jié)(必看篇)
下面就為大家?guī)硪黄猨query對Json的各種遍歷方法總結(jié)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本篇文章主要是對jquery事件重復(fù)綁定的快速解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章給大家介紹了jquery自定義圖片上傳插件的實(shí)例代碼，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧2017-04-04
本篇文章主要是對JQuery的$和其它JS發(fā)生沖突的快速解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
淺談jQuery中對象遍歷.eq().first().last().slice()方法
本文給大家分析了jQuery中的對象遍歷.eq().first().last().slice()方法的使用，以及他們之間的區(qū)別，jQuery源碼中的使用。2014-11-11
$(function() {});是$(document).ready(function(){ })的簡寫，最早接觸的時候也說$(document).ready(function(){ })這個函數(shù)是用來取代頁面中的window.onload;但是今天發(fā)現(xiàn) 好像不是這樣回事！是在做一個頁面載入效果時發(fā)現(xiàn)的！2015-08-08
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對比分析了javascript與jQuery實(shí)現(xiàn)隔行變色的具體操作步驟與相關(guān)技巧,體驗一下jQuery的華麗與簡潔,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery-mobile事件監(jiān)聽與用法,結(jié)合實(shí)例形式分析了jQuery-mobile各種常見事件類型與使用技巧,需要的朋友可以參考下2016-11-11