html实现TAB选项卡切换

DOCTYPE html>  
html>  
head>  
    title> 选项卡示例 title>  
    style>  
        .tabs {  
            overflow: hidden;   
            border: 1px solid #ccc;  
            background-color: #f1f1f1;  
        }  
  
        .tab-links {  
            margin: 0;  
            padding: 0;  
            list-style: none;  
        }  
  
        .tablink {  
            background-color: inherit;   
            float: left;   
            border: none;  
            outline: none;  
            cursor: pointer;  
            padding: 14px 16px;  
            transition: background-color 0.3s;   
            width: 50%;   
            text-align: center;   
        }  
  
        .tablink:hover {  
            background-color: #ddd;   
        }  
  
        .tablink.active {  
            background-color: #4CAF50;   
            color: white;   
        }  
  
        .tabcontent {  
            display: none;  
            padding: 20px;  
            border: 1px solid #ccc;  
            border-top: none;  
        }  
  
        .tabcontent.active {  
            display: block;  
        }  
    style>  
head>  
body>  
  
div class="tabs">  
    ul class="tab-links">  
        li>button class="tablink active" onclick="openTab(event, 'Tab1')">Tab 1button>li>  
        li>button class="tablink" onclick="openTab(event, 'Tab2')">Tab 2button>li>  
    ul>  
  
    div id="Tab1" class="tabcontent active">  
        h3>Tab 1 内容 h3>  
        p> 这是 Tab 1 的文本内容。p>  
    div>  
  
    div id="Tab2" class="tabcontent">  
        h3>Tab 2 内容 h3>  
        p> 这是 Tab 2 的文本内容。p>  
    div>  
div>  
  
script>  
    function openTab(evt, tabName) {  
        var i, tabcontent, tablinks;  
        tabcontent = document.getElementsByClassName("tabcontent");  
        for (i = 0; i  tabcontent.length; i++) {  
            tabcontent[i].style.display = "none";  
        }  
  
        tablinks = document.getElementsByClassName("tablink");  
        for (i = 0; i  tablinks.length; i++) {  
            tablinks[i].className = tablinks[i].className.replace("active", "");  
        }  
  
        document.getElementById(tabName).style.display = "block";  
        evt.currentTarget.className += "active";  
    }  
script>  
  
body>  
html>