基础 CSS 选项卡

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

选项卡是帮助我们在单个容器中导航多个文档而无需离开页面的组件。它们充当链接，根据哪个选项卡处于活动状态来更改容器内的内容。

基础 CSS 选项卡类：

• 选项卡：此类为选项卡创建一个基本容器，在该容器中创建所有选项卡。这用于
  元素。
  • tabs-title：这个类在容器内创建标签，并且这个类 div 中的值被用作标签的标题。这用于
  • 元素。
  • is-active：这个类让我们知道哪些类和窗格在重新加载时默认处于活动状态。
  • tabs-panel：此类包含与每个选项卡关联的所有面板数据。
  • tabs-content：此类包含要由选项卡显示的数据。此类嵌套在具有类选项卡面板的父 div 中。

  句法：

  
      
  ...
      ...
  
  
      
  
          ...
      
  

  示例 1：这是一个基本示例，说明了使用 Foundation CSS 制作的水平选项卡。

  HTML

    
  
      
      
    
      
      
      
      
      
  
    
  
      
          
              GeeksforGeeks
          
          Foundation CSS Tabs
          
      
      
          
              Tab1
          
          
              Tab2
          
          
              Tab3
          
          
              Tab4
          
      
    
      
          
              GeeksforGeeks
          
    
          
              
          
    
          
              This is tab 3
    
              
          
    
          
              
          
      
      
          $(document).ready(function () {
              $(document).foundation();
          })
      
  
    

  
  
  

  输出：

  

  基础 CSS 选项卡

  示例 2：这是一个基本示例，说明了使用 Foundation CSS 制作的垂直选项卡。

  HTML

    
  
      
      
    
      
      
      
      
      
  
    
  
      
          
              GeeksforGeeks
          
          Foundation CSS Tabs
          
      
      
          
              Tab1
          
          
              Tab2
          
      
    
      
          
              GeeksforGeeks
          
    
          
              
          
      
      
          $(document).ready(function () {
              $(document).foundation();
          })
      
  
    

  输出：

  

  基础 CSS 选项卡

  参考： https://get.foundation/sites/docs/tabs.html