This article is mainly about the tab effect in jquery and dynamic loading of a simple example of the introduction, the need for friends can come to the reference. I want to help you.
One: Tab effect display code as follows: <html xmlns= "http://www.w3.org/1999/xhtml" ><head> <title> Untitled page </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= "#" > Login < /a><a href= "#" > Registration </a></span> <ul id= "tab" > <li class= "on" > Login </li> <li> Registration </li> <div style= "Clear:both;" ></div> </ul> <div id= "BD" > <div>Login content </div> <div> registered content </div> </div> <script type= "Text/javascript" > $ (Function () {$ ("#bd >div:not (: a)). Hide (); Takes the first DIV under BD and will not be the first to be hidden $ ("#tab li"). MouseOver (function () {//trigger function var index = $ ("#tab Li") when the mouse moves over the LI tag under tab. index (this);//When the current event is indexed, the indexes are recorded inside the index $ (this). addclass (' on '). Siblings (). Removeclass ("on"); Adds a style "on" to the current event and removes the style of the sibling Node//siblings () is the sibling $ ("#bd >div"). EQ (index). Show (). siblings (). Hide (); Show the index DIV below BD and hide the sibling (e.g. $ ("P:eq (1)") means "select Second <p> Element"}); $ ("#links a"). MouseOver (function () {//var index = $ ("#links a"). Index (this);//$ ("#tab li")-eq (index). Trigger ("click "); // }); }); </script> </body> </html> Two: tab effect and dynamic load code as follows: <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 (: A)"). 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" > Hundred dddd</a></td> "); var links = $ ("<div><a href= ' http://www.baidu.com ' >sdfsdfsd</a></div>"); $ ("#tab"). Append (link); Append link $ ("#bd") to the ID tab below. append (links); Append links to the ID BD below); }); </script> <style type= "Text/css" > #tab li.on {background: #3CF;} </style> </head> <bod Y> <form id= "Form1" runat= "Server" > <table> <tr id= "tab" > <td> <a href= "http:// Www.baidu.com "> Baidu </a> </td> <td> <a href=" http://www.cnblogs.com "> Blog Park </a> </td > <td> <a href= "http://www.hao123.com" > Good 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"/> 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"/>: BoundField datafield= "certificate" headertext= "certificate"/> <asp:boundfield "Status" DataField= " Status "/> </Columns> </asp:GridView> </div> </div> </form> </body> </html > Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
