使用js实现tab页签切换效果_javascript tab标签页-优快云博客

本文介绍了一个简单的HTML和JavaScript实现的Tab切换效果。通过CSS样式设置Tab栏和内容区域的布局，利用JavaScript监听Tab按钮点击事件并切换显示的内容区块。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
效果图如下
：
[html]view plaincopy 
    
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 "http://www.w3.org/TR/html4/loose.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
     <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
         <title>New Web Project</title>  
         <style type="text/css">  
             #content {  
                 width: 400px;  
                 height: 200px;  
             }  
               
             #tab_bar {  
                 width: 400px;  
                 height: 20px;  
                 float: left;  
             }  
             #tab_bar ul {  
                 padding: 0px;  
                 margin: 0px;  
                 height: 20px;  
                 text-align: center;  
             }  
               
             #tab_bar li {  
                 list-style-type: none;  
                 float: left;  
                 width: 133.3px;  
                 height: 20px;  
                 background-color: gray;  
             }  
               
             .tab_css {  
                 width: 400px;  
                 height: 200px;  
                 background-color: orange;  
                 display: none;  
                 float: left;  
             }  
               
         </style>  
         <script type="text/javascript">  
             var myclick = function(v) {  
                 var llis = document.getElementsByTagName("li");  
                 for(var i = 0; i < llis.length; i++) {  
                     var lli = llis[i];  
                     if(lli == document.getElementById("tab" + v)) {  
                         lli.style.backgroundColor = "orange";  
                     } else {  
                         lli.style.backgroundColor = "gray";  
                     }  
                 }  
   
                 var divs = document.getElementsByClassName("tab_css");  
                 for(var i = 0; i < divs.length; i++) {  
   
                     var divv = divs[i];  
   
                     if(divv == document.getElementById("tab" + v + "_content")) {  
                         divv.style.display = "block";  
                     } else {  
                         divv.style.display = "none";  
                     }  
                 }  
   
             }  
         </script>  
     </head>  
     <body>  
         <div id="content">  
             <div id="tab_bar">  
                 <ul>  
                     <li id="tab1" onclick="myclick(1)" style="background-color: orange">  
                         tab1  
                     </li>  
                     <li id="tab2" onclick="myclick(2)">  
                         tab2  
                     </li>  
                     <li id="tab3" onclick="myclick(3)">  
                         tab3  
                     </li>  
                 </ul>  
             </div>  
             <div class="tab_css" id="tab1_content" style="display: block">  
                 <div>页面一</div>  
             </div>  
             <div class="tab_css" id="tab2_content">  
                 <div>页面二</div>  
             </div>  
             <div class="tab_css" id="tab3_content">  
                 <div>页面三</div>  
             </div>  
         </div>  
     </body>  
 </html>  