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.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Foundation CSS Stylesheet -->
< link rel = "stylesheet" href =
<!-- jQuery CDN -->
< script src =
</ script >
<!-- Foundation CSS JavaScript -->
< script src =
</ 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.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Foundation CSS Stylesheet -->
< link rel = "stylesheet" href =
<!-- jQuery CDN -->
< script src =
</ script >
<!-- Foundation CSS JavaScript -->
< script src =
</ 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 =
alt = "" >
</ div >
</ div >
</ div >
< script >
$(document).foundation();
</ script >
</ body >
</ html >
|
Output:
Reference: https://get.foundation/sites/docs/tabs.html