html实现TAB选项卡切换

news2024/11/14 19:51:17

<!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; /* 继承.tabs的背景色 */  
            float: left; /* 使选项卡并排显示 */  
            border: none;  
            outline: none;  
            cursor: pointer;  
            padding: 14px 16px;  
            transition: background-color 0.3s; /* 平滑过渡效果 */  
            width: 50%; /* 两个选项卡各占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 1</button></li>  
        <li><button class="tablink" onclick="openTab(event, 'Tab2')">Tab 2</button></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>