jquery 實現tab選項卡功能
阿新 • • 發佈：2019-01-31
程式碼示例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">//Baidu CDN</script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> </head> <ul class="tabs"> <li class="active"><a href="#tab1">TAB1</a></li> <li><a href="#tab2">TAB2</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content" style="display: block; "> tab1內容 </div> <div id="tab2" class="tab_content" style="display: none; "> tab2內容 </div> </div> </html>