In this topic,
We are going to see how to create a custom tab using jQuery.
Step-1: include the jQuery link in the <head>..</head>tag on index.html file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Step-2: Create Html Code in the index.html file.
<body>
<div class="pagetab">
<div class="container">
<p class="text">INFORMATION QUETIONS</p>
<h4 class="text">STORE LOCATOR</h4>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Ahemdabad Branch</li>
<li class="tab-link" data-tab="tab-2">Surat Branch</li>
<li class="tab-link" data-tab="tab-3">Jamnagar Branc</li>
<li class="tab-link" data-tab="tab-4">Vadodara Branc</li>
<li class="tab-link" data-tab="tab-5">Rajkot Branc</li>
</ul>
<div id="tab-6"class="tab-content"></div>
<div id="tab-1" class="tab-content current">
<div class="row">
<div class="box">
<div class="row">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
</div>
<div class="box">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<div class="row">
<div class="box">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
<div class="box">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
<div class="box">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
</div>
</div>
<div id="tab-3" class="tab-content">
<div class="row">
<div class="box">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
</div>
</div>
<div id="tab-4" class="tab-content">
<div class="row">
<div class="box">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
<div class="box boxsa">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
</div>
</div>
<div id="tab-5" class="tab-content">
<div class="row">
<div class="box">
<div class="row">
<div class="detail">
<p>Store code : 105</p>
<h5>LOREM IPSUM LOREM</h5>
<P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body> Step-3: Add CSS in<style>….</style> tag on index.html file.
.container:after{
content:"";
display:block;
clear:both;
}
body .container{
width:100%;
max-width:1000px;
padding-left:15px;
padding-right:15px;
margin:0 auto;
position:relative;
float:none;
}
body .container .container{
width:100%;
max-width:100%;
padding-left:0;
padding-right:0;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border: 1px solid #f5f5f5;
margin: 0;
}
ul.tabs li.current{
color: #222;
position: relative;
border: 1px solid #bdbdbd;
}
.tab-content{
visibility: hidden;
padding: 15px;
}
.tab-content.current{
visibility: visible;
animation-name: example;
animation-duration: 1s;
}
.text{
text-align: center;
}
.box{
border: 1px solid #ccc;
width: 50%;
height: auto;
padding: 25px;
margin-right: 15px;
margin-bottom: 10px;
}
.row{
display: flex;
flex-wrap: wrap;
}
.tab-content .row{
flex-wrap: nowrap;
}
.detail p{
font-size:14px;
color:#474747;
margin: 0px 0px 5px;
}
.detail h5{
margin: 0px 0px 5px;
}
.box .row{
flex-wrap: nowrap;
}
.detail{
padding: 0px 25px;
}
body p{
margin-bottom: 5px;
}
@keyframes example {
from {margin-top: 150px ;}
to {margin-top: 0;}
} Step-4: Add jQuery code in <script>…</script> tag on index.html.
I have added and removed class in li on tab click.
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current').addClass('test');
$(this).addClass('current').removeClass('test');
$("#"+tab_id).addClass('current').removeClass('test');
$('.test').hide();
$('.current').show();
})
}); I hope you guys found something useful ??
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular