首頁 > 開發者 > JavaScript

jquery Tab效果和動態載入的簡單一實例

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jquery Tab效果和動態載入的簡單一實例

 這篇文章主要是對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>

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More