This article introduces JQuery to let the sliding door slide up.
First look at a I streamlined out of the DEMO. And then we'll break it down:
One, first, or the HTML section:
The code is as follows |
Copy Code |
<!--S content area--> <div id= "tab" > <div id= "Tabcontenta" > <p>tabContentA</p> </div> <div id= "TABCONTENTB" > <p>tabContentB</p> </div> <div id= "TABCONTENTC" > <p>tabContentC</p> </div> </div> <!--E content area--> <!--S Slider area--> <div id= "Switcher" > <ul> <li id= "Switchera" >switcherA</li> <li id= "Switcherb" >switcherB</li> <li id= "Switcherc" >switcherC</li> </ul> <span><!--Follow Arrow--></span> </div> <!--E Slider area--> |
Second, then the CSS section:
The code is as follows |
Copy Code |
*{margin:0;padding:0;} #tab {height:180px;padding:10px 20px;overflow:hidden;position:relative;} #tabContentB, #tabContentC {display:none;} /* Non-first block content area default does not show * * #tab div{height:200px;} #switcher Li{width:150px;height:30px;line-height:30px;text-align:center;float:left;cursor:pointer;list-style: none;} #switcher span{width:10px;height:10px;overflow:hidden;position:absolute;background: #000;d isplay:block;left:75px ;} |
Third, JS part (first load jQuery, this is skipped, you know):
The code is as follows |
Copy Code |
$ (document). Ready (function () { $ ("Li#switchera"). Hover (function () { $ ("#switcher span"). Stop (True,true); $ ("#switcher span"). Animate ({ Left: "75px" },250); $ ("#tabContentA"). FadeIn ("slow"); $ ("#tabContentB"). Fadeout ("fast"); $ ("#tabContentC"). Fadeout ("Fast") }); $ ("Li#switcherb"). Hover (function () { $ ("#switcher span"). Stop (True,true); $ ("#switcher span"). Animate ({ Left: "225px" },250); $ ("#tabContentA"). Fadeout ("fast"); $ ("#tabContentB"). FadeIn ("slow"); $ ("#tabContentC"). Fadeout ("Fast") }); $ ("Li#switcherc"). Hover (function () { $ ("#switcher span"). Stop (True,true); $ ("#switcher span"). Animate ({ Left: "375px" },250); $ ("#tabContentA"). Fadeout ("fast"); $ ("#tabContentB"). Fadeout ("fast"); $ ("#tabContentC"). FadeIn ("slow") }); }); |
Full instance
The code is as follows |
Copy Code |
<! DOCTYPE html> <meta charset= "UTF-8" > <style type= "Text/css" > *{margin:0;padding:0;} #tab {height:180px;padding:10px 20px;overflow:hidden;position:relative;} #tabContentB, #tabContentC {display:none;} #tab div{height:200px;} #switcher Li{width:150px;height:30px;line-height:30px;text-align:center;float:left;cursor:pointer;list-style: none;} #switcher span{width:10px;height:10px;overflow:hidden;position:absolute;left:75px;background: #000;d Isplay:block ;} </style> <title>jquery Let sliding doors slide </title> <body> <div id= "tab" > <div id= "Tabcontenta" > <p>tabContentA</p> <p>tabContentA</p> <p>tabContentA</p> <p>tabContentA</p> <p>tabContentA</p> <p>tabContentA</p> <p>tabContentA</p> <p>tabContentA</p> </div> <div id= "TABCONTENTB" > <p>tabContentB</p> <p>tabContentB</p> <p>tabContentB</p> <p>tabContentB</p> <p>tabContentB</p> <p>tabContentB</p> <p>tabContentB</p> <p>tabContentB</p> </div> <div id= "TABCONTENTC" > <p>tabContentC</p> <p>tabContentC</p> <p>tabContentC</p> <p>tabContentC</p> <p>tabContentC</p> <p>tabContentC</p> <p>tabContentC</p> <p>tabContentC</p> </div> </div> <div id= "Switcher" > <ul> <li id= "Switchera" >switcherA</li> <li id= "Switcherb" >switcherB</li> <li id= "Switcherc" >switcherC</li> </ul> <span></span> </div> <script type= "Text/javascript" src= "Jquery.js" ></script> <script type= "Text/javascript" > $ (document). Ready (function () { $ ("Li#switchera"). Hover (function () { $ ("#switcher span"). Stop (True,true); $ ("#switcher span"). Animate ({ Left: "75px" },250); $ ("#tabContentA"). FadeIn ("slow"); $ ("#tabContentB"). Fadeout ("fast"); $ ("#tabContentC"). Fadeout ("Fast") }); $ ("Li#switcherb"). Hover (function () { $ ("#switcher span"). Stop (True,true); $ ("#switcher span"). Animate ({ Left: "225px" },250); $ ("#tabContentA"). Fadeout ("fast"); $ ("#tabContentB"). FadeIn ("slow"); $ ("#tabContentC"). Fadeout ("Fast") }); $ ("Li#switcherc"). Hover (function () { $ ("#switcher span"). Stop (True,true); $ ("#switcher span"). Animate ({ Left: "375px" },250); $ ("#tabContentA"). Fadeout ("fast"); $ ("#tabContentB"). Fadeout ("fast"); $ ("#tabContentC"). FadeIn ("slow") }); }); </script> </body> |