The tab switching effect of jquery implementation

Last Update:2017-02-28 Source: Internet

Author: User

Tags regular expression save file wrapper

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The following is the source code:

  1 &lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt; 2 &lt;html xmlns=" http://www.w3.org/1999/xhtml "&gt; 3 &lt;head&gt; 4 &lt;title&gt;div switch--ke keeper ;/title&gt; 5 &lt;script type= "Text/javascript" src= "Http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" &gt;& Lt;/script&gt; 6 &lt;!--demo content started--&gt; 7 &lt;style type= "Text/css" &gt; 8 *{margin:0;padding:0;list-styl 
 E-type:none;}
 9 a,img{border:0;} 
Body{background: #e3e3e3 height:100%;font:normal normal 12px/24px "Microsoft Yahei", arial;padding-bottom:30px;
 One a{color: #333; text-decoration:none;}
 A:hover{color: #093; text-decoration:none;}
 #title {width:300px;margin:3% auto 0;}
 #title h2{font-size:18px;} #wrapper {width:980px;margin:0 auto;background: #f8f8f8 border:1px solid #a3a3a3;p adding:20px 20px 50px;border-radi
 us:5px;-moz-border-radius:5px;} #wrapPer H3{color: #333; font-size:14px;text-align:center;margin:20px 0;} 
* * Box/box{width:400px;margin:10px auto 0;background: #fff; border:1px solid #d3d3d3;} 
Tab_menu{overflow:hidden} Tab_menu Li{width:100px;float:left;height:30px;line-height:30px;color: #fff; background: #093; text-align:center 
; cursor:pointer;}
 Tab_menu Li.current{color: #333; background: #fff;} 
Tab_menu Li A{color: #fff; text-decoration:none;} 
Tab_menu li.current a{color: #333;} 
tab_box{padding:20px}
 Tab_box Li{height:24px;line-height:24px;overflow:hidden; Tab_box Li span{margin:0
 5px 0 0;font-family: "Song Body"; Font-size:12px;font-weight:400;color: #ddd;}
 Tab_box. Hide{display:none} &lt;/style&gt; &lt;script type= "Text/javascript" src= "jhttp://www.keleyi.com/keleyi/phtml/tabswitch/plus/ Query.tabs.js "&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script type=" Text/javascript "& 
Gt    32  $ (function () {$ ('. Demo2 '). 
Tabs ({34}); 
35}); &lt;/script&gt; Notoginseng &lt;div id= "wrapper" &gt; The mobile mouse &lt;/h3&gt; &lt;div C      lass= "box Demo2" &gt; &lt;ul class= "Tab_menu" &gt; &lt;li class= "current" &gt;jquery special effects &lt;/li&gt; 43 &lt;li&gt;asp.net mvc&lt;/li&gt; &lt;li&gt;javascript&lt;/li&gt; &lt;li&gt;.NET&lt;/li&gt;-&lt; /ul&gt; &lt;div class= "Tab_box" &gt; &lt;div&gt; m &lt;ul&gt; &lt;li&gt;&lt;span&gt;▪&lt; /span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/768f469b95b61487.htm" title= "" &gt; Single-line text intermittently scroll up &lt;/a&gt;&lt;/li &gt; Wuyi &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/ed5eb8c2959c619e.htm" title= " "&gt; scroll the page when the Div arrives at the top when docked to the top &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href=" http://www.keleyi . com/a/bjac/a6d651710217f7a0.htm "title=" &gt; Bubble suspension box with the jquery UI modifier Title Property &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/bf0eb8c02085b10d.htm" Title= "" &gt;jquery empty textarea etc input frame &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http:// Www.keleyi.com/a/bjac/939631bb07adb4dc.htm "title=" "&gt;jquery off light effects &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt; ▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm" title= "&gt;jquery hide top navigation bar based on scrolling pixel display &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/ 7e8897e5ec0849e9.htm "title=" &gt; can change the size of the DIV layer &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; the &lt;/div&gt; &lt; div class= "Hide" &gt; "&lt;ul&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href=" http://www.keleyi.com/a/ bjac/eb6f273eb3c4cd07.htm "title=" page caching issues to note when customizing Authorizeattribute in asp.net mvc 3 "&gt; in asp.net MVC 3 Page caching issues to note when customizing Authorizeattribute in &lt;/a&gt;&lt;/li&gt; &LT;LI&GT;&LT;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/4064796bf1f324c8.htm" title= "" &gt; Collayi message board: asp.net MVC4 case &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http:// Www.keleyi.com/a/bjac/2916901353b081f1.htm "title=" "&gt; Collayi Message Board Introduction &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪& Lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/1a9487bbb1cbfc50.htm" title= MVC: Potentially dangerous Request.Form detected from the client Workaround for value &gt; MVC: A workaround for potentially dangerous request.form values detected from the client &lt;/a&gt;&lt;/li&gt; &LT;LI&GT;&LT;SPAN&GT;▪&LT;/SPAN&GT;&L
 T;a href= "http://www.keleyi.com/a/bjac/101639c1eb1e991b.htm" title= "" &gt;html.actionlink overload &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/781ba7719ce323f.htm" title= "" &gt; asp.net MVC4 with ajax&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div &lt;/div&gt; class= "hid E "&gt; &lt;ul&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href="Http://www.keleyi.com/a/bjac/e7f4d99c87604a8.htm" title= "" &gt;js Trim () &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;spa N&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/5d7f4ac2efa72d30.htm" title= "&gt; Menu scrolling to top after fixed &lt;/a &gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/ 4f6d3873d0571805.htm "title=" "&GT;HTML5 clock &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href=" Http://www.keleyi.com/a/bjac/ceb3c274df032ed5.htm "title=" "&gt;javascript onmousedown event &lt;/a&gt;&lt;/li&gt; &L T;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/a/bjac/a6e756c811719fff.htm" title= "" &gt; Show the left and right arrows on the picture page code &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "Http://www.keleyi.com/dev /f1d8e1f2f1c95bc0.htm "title=" "&gt;window.open page Refresh top page &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;     ;/div&gt; bayi &lt;div class= "Hide" &gt; &lt;ul&gt; 83 &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/dev/beb40909418eb322.htm" title= "" &gt; WinForm child form centered in parent form code &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/ Dev/e52563d8ef0c81dd.htm "title=" "". NET common regular expression &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/dev/ B9c46b55ed4b6e0d.htm "title=" &gt;winform form maximization code &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt; A href= "http://www.keleyi.com/dev/887a9ad6042c676.htm" title= "" &gt;savefiledialog save file suffix &lt;/a&gt;&lt;/li&gt; 87 & Lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/dev/b6539b6c4146cc53.htm" title= "&gt;asp". NET authentication code generation class &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;▪&lt;/span&gt;&lt;a href= "http://www.keleyi.com/dev/ Cb809a6fd56325b8.htm "title=" "&gt;tabcontrol Toggle (Spotlight) Tab &lt;/a&gt;&lt;/li&gt; &LT;LI&GT;&LT;SPAN&GT;▪&LT;/SPAN&GT ; &lt;a href= "http://www.keLeyi.com/dev/908c6faf63374532.htm "title=" "&gt;.net Winform let PictureBox appear scroll bar &lt;/a&gt;&lt;/li&gt; ;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;a &lt;/div&gt; href= "Http://www.keleyi.com/kele Yi/phtml/tabswitch/plus/index.htm "&gt; Effect 0&lt;/a&gt; &lt;a href=" http://www.keleyi.com/keleyi/phtml/tabswitch/ Plus/1.htm "&gt; Effect 1&lt;/a&gt; &lt;a href=" http://www.keleyi.com/keleyi/phtml/tabswitch/plus/3.htm "&gt; Effect 3&lt;/a      &gt; &lt;a href= "http://www.keleyi.com/keleyi/phtml/tabswitch/index.htm" target= "_blank" &gt; Other effects &lt;/a&gt; 99 &lt;a href= "http://www.keleyi.com/a/bjac/88af29335890a287.htm" target= "_blank" &gt; article &lt;/a&gt; m &lt;/div&gt; 10 1 102 &lt;/body&gt; &lt;/html&gt;

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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