Tabs are a flexible and visually appealing method to organize material on a webpage, allowing visitors to smoothly navigate between parts. Whether you’re creating a website, an online portfolio, or an e-commerce platform, using tabs may improve the user experience and overall functioning of your site.
In this blog article, we’ll go into the realm of web development and look at how to use CSS, HTML, and jQuery to construct dynamic and interactive tabs.
We’ll cover the principles of creating tabs from scratch in this step-by-step lesson, beginning with the basic HTML structure. We’ll then use CSS to modify and customize the appearance of our tabs to ensure they match our overall design approach.
To properly interact with our tabs, we’ll use jQuery, a popular JavaScript package that allows us to add dynamic behavior and animations.
How To Build Tabs Only with HTML?
<div class="cxc_main">
<div class="cxc-tab-wrapper">
<ul class="cxc-tabs">
<li class="cxc-tab-link active" cxc-data-tab="1">HTML</li>
<li class="cxc-tab-link" cxc-data-tab="2">CSS</li>
<li class="cxc-tab-link" cxc-data-tab="3">jQuery</li>
<li class="cxc-tab-link" cxc-data-tab="4">javascript</li>
</ul>
</div>
<div class="cxc-content-wrap">
<div id="cxc-tab-1" class="cxc-tab-content active">Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. </div>
<div id="cxc-tab-2" class="cxc-tab-content">CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.</div>
<div id="cxc-tab-3"class="cxc-tab-content">jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.</div>
<div id="cxc-tab-4"class="cxc-tab-content">JavaScript to program the behavior of web pages. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.</div>
</div>
</div> Also, read: How To Make a Countdown Timer In Jquery
How To Build Tabs Only with CSS?
<style type="text/css">
.cxc-tab-wrapper {
text-align: center;
display: block;
margin: auto;
max-width: 500px;
}
.cxc-tabs {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.cxc-tab-link {
margin: 0 1%;
list-style: none;
padding: 10px 40px;
color: #aaa;
cursor: pointer;
font-weight: 700;
transition: all ease 0.5s;
border-bottom: solid 3px rgba(255, 255, 255, 0);
letter-spacing: 1px;
}
.cxc-tab-link:hover {
color: #999;
border-color: #999;
}
.cxc-tab-link.active {
color: #333;
border-color: #333;
}
.cxc-tab-link:nth-of-type(1).active {
color: #587052;
border-color: #587052;
}
.cxc-tab-link:nth-of-type(2).active {
color: #abc9a1;
border-color: #abc9a1;
}
.cxc-tab-link:nth-of-type(3).active {
color: #ffbc66;
border-color: #ffbc66;
}
.cxc-content-wrap {
padding: 40px 80px;
}
.cxc-tab-content {
display: none;
text-align: center;
color: #888;
font-weight: 300;
font-size: 15px;
opacity: 0;
transform: translateY(15px);
animation: fadeIn 0.5s ease 1 forwards;
}
.cxc-tab-content.active {
display: block;
}
@keyframes fadeIn {
100% {
opacity: 1;
transform: none;
}
}
</style>How To Build Tabs Only with JQuery?
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery(document).on( 'click', '.cxc_main .cxc-tabs .cxc-tab-link', function () {
var cxc_tab_id = jQuery(this).attr('cxc-data-tab');
jQuery(this).addClass('active').siblings().removeClass('active');
jQuery('#cxc-tab-'+cxc_tab_id).addClass('active').siblings().removeClass('active');
});
});
</script>Also, read:
