How to create tabs that display different content
creating tabs that display different content using javascript involves handling click events on the tab headers and showing or hiding the corresponding content based on the clicked tab. here's an example of how you can achieve this:
1. set up your html structure:
<!Doctype html>
<html>
<head>
<title>tabs example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tabs">
<div class="tab-header">
<button class="tab-button active" data-tab="tab1">tab 1</button>
<button class="tab-button" data-tab="tab2">tab 2</button>
<button class="tab-button" data-tab="tab3">tab 3</button>
</div>
<div class="tab-content" data-tab="tab1">
<h2>tab 1 content</h2>
<p>this is the content for tab 1.</p>
</div>
<div class="tab-content hidden" data-tab="tab2">
<h2>tab 2 content</h2>
<p>this is the content for tab 2.</p>
</div>
<div class="tab-content hidden" data-tab="tab3">
<h2>tab 3 content</h2>
<p>this is the content for tab 3.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>2. create a css file (styles.css) to style the tabs:
css
.tabs {
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.tab-header {
display: flex;
}
.tab-button {
padding: 10px 20px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
}
.tab-button.active {
background-color: #ccc;
}
.tab-content {
padding: 20px;
}
.hidden {
display: none;
}3. now, create a javascript file (script.js) to handle the tab switching:
javascript
document.addeventlistener('domcontentloaded', function () {
const tabbuttons = document.queryselectorall('.tab-button');
const tabcontents = document.queryselectorall('.tab-content');
function showtab(tab) {
tabcontents.foreach((content) => {
content.classlist.toggle('hidden', content.dataset.tab !== tab);
});
tabbuttons.foreach((button) => {
button.classlist.toggle('active', button.dataset.tab === tab);
});
}
// add click event listeners to the tab buttons
tabbuttons.foreach((button) => {
button.addeventlistener('click', function () {
const selectedtab = this.dataset.tab;
showtab(selectedtab);
});
});
// show the first tab by default
showtab(tabbuttons[0].dataset.tab);
});4. place all the files (html, css, and js) in the same folder, and open the html file in a web browser. clicking on the tab buttons will toggle the display of the corresponding content.
the `data-tab` attribute in the html elements is used to associate tab buttons with their corresponding content. the `showtab` function handles the logic to show and hide the content based on the clicked tab. initially, the first tab is shown by default using the `showtab` function with the first tab's dataset.
you can add more tabs by duplicating the `.tab-content` divs and updating their `data-tab` attributes and content. the javascript code will handle the rest automatically.
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.