一个HTML的页面标签转换效果，贴出来。供大家参考
先来一张图
如图，页面的左右两边都可以进行切换。
代码很简单，，首先需要jquary的js。
主要HTML代码：
<div id="tabbed_box_1" class="tabbed_box"><div class="tabbed_area"><ul class="tabs"><li><a href="#" title="content_1" class="tab active">信息</a></li><li><a href="#" title="content_2" class="tab">数据</a></li><li><a href="#" title="content_3" class="tab">曲线</a></li><li><a href="#" title="content_4" class="tab">地图</a></li></ul><div id="content_1" class="content">信息</div><div id="content_2" class="content">数据</div><div id="content_3" class="content">曲线</div><div id="content_4" class="content">地图</div></div></div>主要js代码：
<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>主要css代码：
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;}这里需要注意标签的开始隐藏在这里需要设置#content_2, #content_3,#content_4 {display: none;}顺便将我右边页面的代码全部贴出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link media="screen" type="text/css" href="css_system/rightTabs.css" rel="stylesheet"><script type="text/javascript" src="js_system/jquery-1.11.2.js"></script><title>无标题文档</title><style type="text/css"><!–.STYLE1 {color: #0066FF}.mydiv {text-align: center;padding:5px;margin:auto;}–></style></head><body><div id="tabbed_box_1" class="tabbed_box"><div class="tabbed_area"><ul class="tabs"><li><a href="#" title="content_1" class="tab active">信息</a></li><li><a href="#" title="content_2" class="tab">数据</a></li><li><a href="#" title="content_3" class="tab">曲线</a></li><li><a href="#" title="content_4" class="tab">地图</a></li></ul><div id="content_1" class="content">信息</div><div id="content_2" class="content">数据</div><div id="content_3" class="content">曲线</div><div id="content_4" class="content">地图</div></div></div></body><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></html>
我想有一天和你去旅行。去那没有去过的地方，
