標籤：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 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" "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 upvar content_show = $(this).attr("title");$("#"+content_show).slideDown();});var vheight = $(window).height();$("body").height(vheight-70);$(".content").height(vheight-70); }); </script></html>
html 頁面標籤轉換效果執行個體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
