html 页面标签转换效果实例
一个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 up var 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 up var content_show = $(this).attr("title"); $("#"+content_show).slideDown(); }); var vheight = $(window).height(); $("body").height(vheight-70); $(".content").height(vheight-70); }); </script> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。