An HTML page label conversion effect, posted out. For everyone's reference
Let's start with a picture.
, the left and right sides of the page can be toggled.
The code is very simple, first of all need Jquary JS.
Main HTML code:
<div id= "tabbed_box_1" class= "Tabbed_box" > <div class= "Tabbed_area" > <ul class= "tabs" > <li><a href= "#" title= "content_1" class= "tab Active" > Info </a></li> <li><a href= "#" title= "content_2" class= "tab" > Data </a></li> <li><a href= "#" title= "Content_3" class= tab > Curves </a></li> <li><a href= "#" title= "Content_4" class= "tab" > Map </a> </li> </ul> <div id= "content_1" class= "Content" > information </div> <div Id= "content_2" class= "Content" > data </div> <div id= "content_3" class= "Content" > curves </div> <div id= "Content_4" class= "content" > maps </div> </ Div></div>
Main JS Code:
<script> /When the document loads does everything inside here ... $ (document). Ready (function () {//When a link is clicked$ ("A.tab"). Click (function () {//Switch all tabs off$ (". Active"). Re Moveclass ("active");//Switch This tab on$ (this). AddClass ("active");//Slide All content up$ (". Content"). Slideup ();// Slide this content Upvar Content_show = $ (this). attr ("title"); $ ("#" +content_show). Slidedown ();}); var vheight = $ (window). Height (), $ ("body"). Height (vheight-70); $ (". Content"). Height (vheight-70); }); </script>
Main CSS code:
Body {background-color: #336699; Overflow-y:scroll; margin-left:5px;margin-top:5px;margin-right:5px;margin-bottom:5px;} #tabbed_box_1 {margin:0 auto; width:100%;height:100%;}. Tabbed_box h4 {color: #ffffff; Font-family:arial,helvetica,sans-serif; font-size:23px; Letter-spacing: -1px; margin-bottom:10px;}. Tabbed_box h4 Small {color: #e3e9ec; Font-family:verdana,arial,helvetica,sans-serif; font-size:9px; Font-weight:normal; left:6px; letter-spacing:0; position:relative; Text-transform:uppercase; Top: -4px;}. Tabbed_area {background-color: #336699; border:0px solid #494e52; padding:8px;height:100%;} Ul.tabs {margin:5px 0 6px; padding:0;} Ul.tabs Li {display:inline; List-style:outside none;} Ul.tabs Li a {background-color: #464c54; Background-image:url ("images/tab_off.jpg"); Background-position:center Bottom; Background-repeat:repeat-x; border:1px solid #464c54;Color: #ffebb5; Font-family:verdana,arial,helvetica,sans-serif; font-size:15px; Font-weight:bold; PADDING:8PX 14px; Text-decoration:none; Text-transform:uppercase;} Ul.tabs li a:hover {background-color: #2f343a; Border-color: #2f343a;} Ul.tabs Li a.active {-moz-border-bottom-colors:none; -moz-border-left-colors:none; -moz-border-right-colors:none; -moz-border-top-colors:none; Background-color: #ffffff; Background-image:url ("images/tab_on.jpg"); Background-position:center top; Background-repeat:repeat-x; Border-color: #464c54 #464c54 #ffffff; Border-image:none; Border-style:solid; border-width:1px; Color: #282e32;}. Content {background-color: #ffffff; Background-image:url ("images/content_bottom.jpg"); Background-position:center Bottom; Background-repeat:repeat-x; border:1px solid #464c54; Font-family:arial,helvetica,sans-serif; padding:10px;} #content_2, #content_3, #content_4 {diSplay:none;}. Content ul {margin:0;}. Content ul Li {font-size:13px; List-style:outside none none; padding-bottom:3px; padding-top:3px;}. Content ul Li:last-child {border-bottom:medium none;}. Content ul li a {color: #3e4346; Text-decoration:none;}. Content ul li a small {color: #8b959c; Font-family:verdana,arial,helvetica,sans-serif; font-size:9px; left:4px; position:relative; Text-transform:uppercase; top:0;}. Content ul li a:hover {color: #a59c83;}. Content ul li a:hover Small {color: #baae8e;}
Here you need to note that the beginning of the tag is hidden here to set
#content_2, #content_3, #content_4 { display:none;}
By the way, all the code on my right page is posted.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
HTML page label Conversion effect instance