Foundation CSS Tabs
Last Updated :
20 Feb, 2022
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
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.
Foundation CSS Tabs Classes:
- tabs: This class creates a basic container for tabs inside which all the tabs are created. This is used on <ul> element.
- tabs-title: This class creates the tabs inside the container and values inside this class div are used as titles for the tabs. This is used on <li> elements.
- is-active: This class lets us know which class and pane are active by default on reload.
- tabs-panel: This class contains all the panel data associated with each tab.
- tabs-content: This class contains the data that is to be displayed by tabs. This class is nested inside a parent div with a class tabs-panel.
Syntax:
<ul class = "tabs" data-tabs id = "tabs_example">
<li class = "tabs-title is-active">...</li>
...
</ul>
<div class = "tabs-content">
<div class = "tabs-panel is-active">
...
</div>
</div>
Example 1: This is a basic example illustrating horizontal tabs made using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Tabs</strong>
<br /><br />
</center>
<ul class="tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active">
<a href="#content1">Tab1</a>
</li>
<li class="tabs-title">
<a href="#content2">Tab2</a>
</li>
<li class="tabs-title">
<a href="#content3">Tab3</a>
</li>
<li class="tabs-title">
<a href="#content4">Tab4</a>
</li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="content1">
<h1>GeeksforGeeks</h1>
</div>
<div class="tabs-panel" id="content2">
<img src=
</div>
<div class="tabs-panel" id="content3">
<p>This is tab 3</p>
<img src=
</div>
<div class="tabs-panel" id="content4">
<img src=
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Tabs
Example 2: This is a basic example illustrating vertical tabs made using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Tabs</strong>
<br /><br />
</center>
<ul class="vertical tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active">
<a href="#content1">Tab1</a>
</li>
<li class="tabs-title">
<a href="#content2">Tab2</a>
</li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="content1">
<h1>GeeksforGeeks</h1>
</div>
<div class="tabs-panel" id="content2">
<img src=
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Tabs
Reference: https://get.foundation/sites/docs/tabs.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...