Foundation CSS Tabs and URLs
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;" > w3wiki </ 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;" > w3wiki </ 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 Beginner. Gain and share your knowledge & skills with a variety of learning platforms offered by w3wiki. 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.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" alt = "" > </ div > </ div > </ div > < script > $(document).foundation(); </ script > </ body > </ html > |
Output:
Reference: https://get.foundation/sites/docs/tabs.html