标签页（tabs）内容的显示和样式

lljss2020

于 2024-10-11 15:55:36 发布

阅读量136

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/lljss1980/article/details/142856233

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Tabs Example</title>  
    <style>  
        /* 在这里嵌入CSS规则 */  
        .tab-content {  
            display: none;  
            border: 1px solid #ccc;  
            padding: 1px;  
            margin-top: 0px;  
        }  
        .tab-content.active {  
            display: block;  
        }  
    </style>  
</head>  
<body>  
    <div class="tabs">  
        <button class="tab-button" onclick="showTab(0)">Tab 1</button>  
        <button class="tab-button" onclick="showTab(1)">Tab 2</button>  
    </div>  
    <div class="tab-contents">  
        <div id="tab1" class="tab-content active">  
            <p>This is the content of Tab 1.</p>  
        </div>  
        <div id="tab2" class="tab-content">  
            <p>This is the content of Tab 2.</p>  
        </div>  
    </div>  
    <script>  
        function showTab(index) {  
            var tabContents = document.querySelectorAll('.tab-content');  
            tabContents.forEach(function(tabContent) {  
                tabContent.classList.remove('active');  
            });  
            if (index >= 0 && index < tabContents.length) {  
                tabContents[index].classList.add('active');  
            }  
        }  
    </script>  
</body>  
</html>