萬盛學電腦網 >> 腳本專題 >> javascript >> jquery Tab效果和動態加載的簡單實例
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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved