如何在 HTML 中创建包含不同内容的选项卡？

标签用于导航和显示网站周围的不同内容。我们使用标签来管理空间并使网站更具吸引力。

方法：

• 在 body 标记中，在 div 标记下创建一些选项卡，其中包含包含内容 ID 的 Custom-Data-Attribute。
•  创建另一个 div 标签以存储具有特定 id 的选项卡的内容。
•  为每个内容标签指定数据属性以一次仅显示一个选项卡内容。
• 使用 JavaScript，我们可以使用其 id 显示标签的内容。

在本文中，我们创建了三个选项卡 Tab-1、Tab-2 和 Tab-3。当我们单击任何特定选项卡时，它将显示该选项卡的内容。

注： CSS 参考样式标签下的代码，JavaScript 参考脚本标签下的代码。

示例：在此示例中，我们将创建包含不同内容的选项卡。

HTML

  

    
        body {
            background: rgb(140, 214, 30);
        }
          
        [data-tab-info] {
            display: none;
        }
          
        .active[data-tab-info] {
            display: block;
        }
          
        .tab-content {
            font-size: 30px;
            font-family: sans-serif;
            font-weight: bold;
            color: rgb(82, 75, 75);
        }
          
        .tabs {
            font-size: 40px;
            color: rgb(255, 255, 255);
            display: flex;
            margin: 0;
        }
          
        .tabs span {
            background: rgb(28, 145, 38);
            padding: 10px;
            border: 1px solid rgb(255, 255, 255);
        }
          
        .tabs span:hover {
            background: rgb(29, 185, 112);
            cursor: pointer;
            color: black;
        }
    

  

    
        Tab-1
        Tab-2
        Tab-3
    
  
    
        
            Welcome to GeeksforGeek.
  
        
        
            Hello Everyone.
  
        
        
            Learn cool stuff.
  
        
    
    
        const tabs = document.querySelectorAll('[data-tab-value]')
        const tabInfos = document.querySelectorAll('[data-tab-info]')
  
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const target = document
                    .querySelector(tab.dataset.tabValue);
  
                tabInfos.forEach(tabInfo => {
                    tabInfo.classList.remove('active')
                })
                target.classList.add('active');
            })
        })
    

  

输出：当我们点击 Tab-1 时，它显示 Tab-1 的内容与 Tab-2 和 Tab-3 相同。