In this blog, we learn to create and implement simple tabs using HTML, CSS, and JavaScript. And how to run tabs by giving a specific id. And last how to give an id of the second tab in the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
text-transform: capitalize;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
font-size: 56px;
font-weight: 300;
padding: 40px;
text-align: center;
}
.mytab {
display: block;
box-shadow: inset 0 -1px 0 #cccccc;
}
.mytab ul {
display: block;
width: 80%;
margin: 0 auto;
}
.mytab li {
display: inline-block;
width: 24%;
text-align: center;
height: 50px;
line-height: 50px;
background-color: #fafafa;
border: 1px solid #cccccc;
}
.mytab li.is-active {
background-color: #1e2099;
border-bottom: 1px solid #fff;
}
.mytab li.is-active a{
color: #fff;
}
.mytab a {
width: 100%;
height: 100%;
display: block;
color: #000;
text-decoration: none;
}
.tab_content {
width: 90%;
margin: 40px auto;
}
.content h2 {
margin-bottom: 20px;
}
.tab_content {
display: none;
}
.tab_content.is-active {
display: block;
}
.btn{
background-color: #1e2099;
color: #cccccc;
text-transform: uppercase;
text-decoration: none;
padding: 25px;
}
</style>
</head>
<body>
<nav class="mytab">
<ul>
<li class="mytab-item">
<a class="tab__link" data-tab="tab1" href="#tab1">tab1</a>
</li>
<li class="mytab-item">
<a class="tab__link" data-tab="tab2" href="#tab2">tab2</a>
</li>
<li class="mytab-item">
<a class="tab__link" data-tab="tab3" href="#tab3">tab3</a>
</li>
<li class="mytab-item">
<a class="tab__link" data-tab="tab4" href="#tab4">tab4</a>
</li>
</ul>
</nav>
<section class="content">
<div class="tab_content" data-content="tab1">
<h2>
tab1 content
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis amet dignissimos saepe doloribus, molestiae modi dolores officiis provident dolorum magni, nesciunt animi perspiciatis cupiditate doloremque sit labore. Esse, nam non?
</p>
</div>
<div class="tab_content" data-content="tab1">
<h2>
tab1 content
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis amet dignissimos saepe doloribus, molestiae modi dolores officiis provident dolorum magni, nesciunt animi perspiciatis cupiditate doloremque sit labore. Esse, nam non?
</p>
<br><br><br>
<a href="index.html#tab2" class="btn">Go to Tab2 </a>
</div>
<div class="tab_content" data-content="tab2">
<h2>
tab2 content
</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi nostrum cum sunt, enim deleniti reprehenderit aperiam voluptatum veritatis corporis molestias, alias, quo cupiditate aut iure autem non quos. Eos, quod.
</p>
</div>
<div class="tab_content" data-content="tab3">
<h2>
tab3 content
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad atque vel eveniet optio at, omnis deserunt vero neque, aliquam eius aliquid nostrum officia facere ducimus maxime commodi aperiam sit voluptas?
</p>
</div>
<div class="tab_content" data-content="tab4">
<h2>
tab4 content
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, quo quaerat, optio deserunt pariatur reprehenderit dicta beatae dignissimos voluptatem dolore eos minima ipsa hic nesciunt sequi, debitis voluptatibus tenetur consectetur?
</p>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var hashTabs;
hashTabs = function() {
return {
_element: '',
element: function(element) {
return this._element = element;
},
updateTab: function() {
this.updateTabLink();
this.updateTabContainer();
return $('body').scrollTop(0);
},
updateTabLink: function() {
return this._element.closest('.mytab-item').addClass('is-active').siblings('.is-active').removeClass('is-active');
},
updateTabContainer: function() {
var dataTab = this._element.data('tab');
var contentTab = $('[data-content=\'' + dataTab + '\']');
if (this._element.attr('data-tab')) {
$('.tab_content').removeClass('is-active').hide();
}
contentTab.addClass('is-active').show();
},
};
};
if ($('[data-tab]').length) {
$(window).on('load', function() {
var hash, tabs;
if (window.location.hash !== '') {
hash = window.location.hash.replace('#', '');
tabs = new hashTabs();
tabs.element($('[data-tab=\'' + hash + '\']'));
return tabs.updateTab();
} else {
tabs = new hashTabs();
tabs.element($('[data-tab]').first());
return tabs.updateTab();
}
});
$(window).on('hashchange', function() {
var hash, tabs;
hash = window.location.hash.replace('#', '');
tabs = new hashTabs();
tabs.element($('[data-tab=\'' + hash + '\']'));
return tabs.updateTab();
});
return $('[data-tab]').on('click', function(e) {
var tabs;
tabs = new hashTabs();
tabs.element($(this));
tabs.updateURLHash();
return e.preventDefault();
});
}
}).call(this);
</script>
</body>
</html>This code is an HTML document that demonstrates the implementation of a simple tab using HTML, CSS, and JavaScript. Tabs allow users to switch between different sections of content without loading a new page. Let’s learn about the code and its functionality:
The HTML structure begins with the <!DOCTYPE html> declaration, followed by the opening <html> tag. The language attribute for English is set to “en”.
The <Head> section contains metadata, including the character encoding (<meta charset=”UTF-8″>), and a <style> block for CSS styling.
Inside the <style> block, various CSS rules are defined for styling the tabs and their contents. Styles define the appearance of tabs, the active tab, and the content associated with each tab.
The section begins with a which contains the headings for the tabs.
Tabs are implemented using an unordered list (<ul>) inside an <nav> element. Each list item (<li>) represents a tab, and the corresponding content is placed inside <div> elements with the class tab_content.
Javascript is included at the end of the document using the <script> tag. It uses the JQuery library to handle the tab functionality.
The hashTabs function is defined, which does the job of updating tabs based on URL hashes and user interactions.
Inside the hashtag function, various methods are defined:
element: Sets the current tab element.
Updated: Updates the active tab and its associated content.
updateTabLink: Adds the “is-active” class to the current tab link and removes it from other tabs.
updateTabContainer: Shows the content of the current tab and hides the content of other tabs.
The code then checks if there are any tabs ($(‘[data-tab]’).length), and if so, when the page loads, when the URL hash changes, and when a tab is clicked.
Finally, a <script> tag includes the jQuery library from the CDN (Content Delivery Network). This allows the use of jQuery functions in JavaScript code.
In short, this code sets up a simple tab system using HTML, CSS, and JavaScript/jQuery. It allows users to switch between tabs and displays related content for each tab. The active tab is determined based on the URL hash, and content is shown or hidden accordingly.
How to make Button in Tab 1 to go to Tab 2
To go to tab 2, the button in tab 1 has to be given the id of the tab to go to.
How to Create Tabs with Click Url | How to Create Tabs With id
Live Example:-
See the Pen How to Create and Implement Simple Tabs Using HTML, CSS, and JavaScript. by khushal (@mr__khushal) on CodePen.
