Foundation CSS Tabs and URLs

Last Updated : 27 Oct, 2022

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device.

Tabs are components that help us navigate multiple documents in a single container without leaving the page. They act as a link that changes the content inside the container based on which tab is active.

In this article, we going to discuss Tabs and URLs. This is specifically very useful in adding the address of the sections of the container to the browser history. Besides that, this is also very handy when we want to redirect to a specific section or panel. For adding this feature, we don’t need to add any specific class we need to add the data-deep-link=” true” to the tabs container. Also, we need to add the data-update-history=” true” to the same which will ensure that the browsing history is updated every time a tab is clicked.

Syntax:

<ul class="tabs" data-deep-link="true" 
    data-update-history="true" data-tabs id="...">
    <li class="tabs-title">
        ....
     </li>
     <li class="tabs-title">
         ....
     </li>
</ul>

Example 1: The code below demonstrates tabs using Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- jQuery CDN -->
    <script src= 
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
  
    <!-- Foundation CSS JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Foundation CSS Tabs and URLs</h3> 
      
    <div style="width:900px;"> 
        <ul class="tabs" data-deep-link="true" 
            data-update-history="true" 
            data-tabs id="deeplinked-tabs"> 
            <li class="tabs-title is-active"> 
                <a href="#first" 
                    aria-selected="true">C++</a> 
            </li> 
            <li class="tabs-title"> 
                <a href="#second">JAVA</a> 
            </li> 
            <li class="tabs-title"> 
                <a href="#third">HTML</a> 
            </li> 
            <li class="tabs-title"> 
                <a href="#fourth">CSS</a> 
            </li> 
        </ul> 
  
        <div class="tabs-content" 
            data-tabs-content="deeplinked-tabs"> 
            <div class="tabs-panel is-active" id="first"> 
                <p> 
                    C++ is a general-purpose programming  
                    language and is widely used nowadays  
                    for competitive programming. It has  
                    imperative, object-oriented and  
                    generic programming features. C++  
                    runs on lots of platforms like Windows, 
                    Linux, Unix, Mac etc. C++ programming  
                    tutorial 
                </p> 
            </div> 
            <div class="tabs-panel" id="second"> 
                <p> 
                    Java syntax is similar to C/C++. But  
                    Java does not provide low-level  
                    programming functionalities like  
                    pointers. Also, Java codes are always  
                    written in the form of classes and  
                    objects. 
                </p> 
            </div> 
            <div class="tabs-panel" id="third"> 
                <p> 
                    HTML stands for HyperText Markup  
                    Language. It is used to design web  
                    pages using the markup language. 
                    HTML is the combination of Hypertext  
                    and Markup language. Hypertext defines  
                    the link between the web pages and 
                    markup language defines the text document 
                    within the tag that define the structure  
                    of web pages. 
                </p> 
            </div> 
            <div class="tabs-panel" id="fourth"> 
                <p>  
                    CSS (Cascading Style Sheets)is used 
                    to apply styles to web pages.  
                    Cascading Style Sheets are fondly  
                    referred to as CSS. It is used to  
                    make web pages presentable. 
                </p> 
            </div> 
        </div> 
    </div> 
      
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html> 

Output:

Example 2: The code below shows another example of tabs and URLs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- jQuery CDN -->
    <script src= 
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
  
    <!-- Foundation CSS JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Foundation CSS Tabs and URLs</h3> 
      
    <div style="width:900px;"> 
        <ul class="tabs" data-deep-link="true" 
            data-update-history="true" 
            data-tabs id="deeplinked-tabs"> 
            <li class="tabs-title is-active"> 
                <a href="#first" 
                    aria-selected="true">GFG</a> 
            </li> 
            <li class="tabs-title"> 
                <a href="#second">GFG logo</a> 
            </li> 
        </ul> 
  
        <div class="tabs-content" 
            data-tabs-content="deeplinked-tabs"> 
            <div class="tabs-panel is-active" id="first"> 
                <p> 
                    A Computer Science portal for geeks. 
                    Gain and share your knowledge &  
                    skills with a variety of learning  
                    platforms offered by GeeksforGeeks. 
                    Billions ofUsers, Millions of Articles  
                    Published, Thousands Got Hired by Top  
                    Companiesand the numbers are still  
                    growing. We provide a variety of 
                    services foryou to learn, thrive and  
                    also have fun! 
                </p> 
            </div> 
            <div class="tabs-panel" id="second"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                    alt=""> 
            </div> 
        </div> 
    </div> 
      
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html> 