基础 CSS 垂直标签

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

选项卡是用于在不离开当前页面的情况下在面板中显示内容的导航选项卡。我们可以通过创建选项卡并在其上存储一些内容来节省网页空间。垂直选项卡是在垂直方向创建的选项卡，内容显示在选项卡的右侧。在本文中，我们将讨论如何在 Foundation CSS 中创建垂直选项卡。

基础 CSS 垂直标签类：

• tabs ：用于创建标签。
• vertical ：用于创建垂直标签。
• tabs-title：用于给出选项卡的标题。
• tabs-content：用于给出选项卡的内容。

句法：

    .........

示例 1：下面是说明带有内容的垂直选项卡的示例。

HTML

  

    
  
    
    
  
    
    

  
    
    
        GeeksforGeeks
    
  
    
        Foundation CSS Vertical Tabs
    
  
    
      
      
          First Tab
      
  
      
          Second Tab
      
  
      
          Third Tab
      
      
  
     
       
         
           Tab 1 content
           
              A Computer Science portal for geeks. 
              It contains well written, 
              well thought and well explained computer 
              science and programming articles
           
         
  
         
           Tab 2 content
           
              With the idea of imparting programming 
              knowledge, Mr. Sandeep Jain, an IIT Roorkee 
              alumnus started a dream, GeeksforGeeks.
           
         
  
         
           Tab 3 content
           
              A Computer Science portal for geeks. 
              It contains well written, well thought and 
              well explained computer science and programming articles
           
         
       
     
    
  
    
      $(document).ready(function() {
          $(document).foundation();
      })
    

  

输出：

示例 2：下面是说明带有文本和图像的垂直选项卡的示例。

HTML

  

    
  
    
    
  
    
    

  

    
        GeeksforGeeks
    
  
    Foundation CSS Vertical Tabs
  
    
        
            
                First Tab
            
  
            
                Second Tab
            
  
            
                Third Tab
            
  
            
                Fourth Tab
            
  
            
                Fifth Tab
            
        
  
        
            
                
                    Tab 1 content
                    
                        A Computer Science portal for geeks. 
                        It contains well written, well thought 
                        and well explained computer science and 
                        programming articles
                    
                
  
                
                    Tab 2 Image
                    GeeksforGeeks Image
                    
                
  
                
                    Tab 3 content
                    
                        With the idea of imparting programming 
                        knowledge, Mr. Sandeep Jain, an IIT Roorkee 
                        alumnus started a dream, GeeksforGeeks.
                    
                
  
                
                    Tab 4 Image
                    GFG Image
                    
                
  
                
                    Tab 5 content
                    
                        With every tick of time, we are adding 
                        arrows in our quiver. From articles on various 
                        computer science subjects for practice
                    
                
            
        
    
  
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出：

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