HTML page label Conversion effect instance

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