Examples of html page tag conversion effect and html page tag

Examples of html page tag conversion effect and html page tag

Paste the conversion effect of an HTML page tag. For your reference

First, let's take a picture.

You can switch between the left and right sides of the page.

The code is very simple. First, jquary's js is required.

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"> Information </a> </li> <a href = "#" title = "content_2" class = "tab"> data </a> </li> <a href = "#" title = "content_3" class = "tab"> curve </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 "> curve </div> <div id =" content_4 "class =" content "> Map </div>

Main js Code:

<script>  // When the document loads do everything inside here ...  $(document).ready(function(){// When a link is clicked$("a.tab").click(function () {// switch all tabs off$(".active").removeClass("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 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;}

Note that you need to set the tag to hide the tag.

#content_2, #content_3,#content_4 {    display: none;}

By the way, paste all the code on my right page

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">