 |
| Tab Slider |
Hello friends, today in this blog we will learn how to make a tab slider using HTML CSS and JavaScript. In the earlier blog we learn How do you make a scientific calculator using HTML CSS and JavaScript.
So Here is the code and my work. I hope you are gonna love this and share whit your friends too. So let's Start learning tab slider using HTML CSS and JavaScript | tab slider using HTML CSS and JavaScript - html css from scratch. So Let's start..
STEP 1: Open any code editor
STEP 2: Create a index.html file with html extension
Create a new file index.html, Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to make a tab slider using HTML CSS and JavaScript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="btn-box">
<button class="btn active" id="btn1" onclick="tab1()">Tab One</button>
<button class="btn" id="btn2" onclick="tab2()"> Tab Two</button>
<button class="btn" id="btn3" onclick="tab3()">Tab Three</button>
</div>
<div id="content1" class="content">
<h1>Heading One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="hero-btn">Learn More</a>
</div>
<div id="content2" class="content">
<h1>Heading Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="hero-btn">Learn More</a>
</div>
<div id="content3" class="content">
<h1>Heading Three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="hero-btn">Learn More</a>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
STEP 3: Create a style.css file with CSS extension
Create a new file style.css, Here is the code
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif
}
.main{
width: 70%;
margin: 50px auto;
position: relative;
overflow: hidden;
height: 400px;
}
.btn-box{
display: block;
}
.btn{
padding: 10px 20px;
border: 0;
cursor: pointer;
background: transparent;
font-size: 1em;
}
.content{
background: #FFA500;
position: absolute;
padding: 20px;
color: #fff;
transform: translateX(100%);
transition: .5s;
}
.content p{
margin: 20px 0;
font-weight: 300;
}
.hero-btn{
background: #fff;
color: #111;
max-width: 150px;
border-radius: 32px;
padding: 13px 32px;
text-decoration: none;
margin-top: 20px;
display: inline-block;
transition: .5s;
}
.hero-btn:hover{
background: red;
color: #fff;
}
#content1{
transform: translateX(0px);
}
.btn.active{
background: #FFA500;
color: #fff;
}
STEP 4: Create a main.js file with js extension
Create a new file main.js, Here is the code
var conten1 = document.getElementById('content1');
var conten2 = document.getElementById('content2');
var conten3 = document.getElementById('content3');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
function tab1(){
conten1.style.transform='translateX(0px)';
conten2.style.transform='translateX(100%)';
conten3.style.transform='translateX(100%)';
}
btn1.addEventListener('click',function(){
btn1.classList.add('active');
btn2.classList.remove('active');
btn3.classList.remove('active');
});
function tab2(){
conten2.style.transform='translateX(0px)';
conten1.style.transform='translateX(100%)';
conten3.style.transform='translateX(100%)';
}
btn2.addEventListener('click',function(){
btn2.classList.add('active');
btn1.classList.remove('active');
btn3.classList.remove('active');
});
function tab3(){
conten3.style.transform='translateX(0px)';
conten2.style.transform='translateX(100%)';
conten1.style.transform='translateX(100%)';
}
btn3.addEventListener('click',function(){
btn3.classList.add('active');
btn1.classList.remove('active');
btn2.classList.remove('active');
});
0 Comments