Embedded Files
TITLE : How To Create Tabs in Less Than 12 Minutes Using HTML CSS | Vanilla JavaScript Project
<html>
<head>
<title>Animated Tabs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tabContainer">
<header>
<div id="indicator"></div>
<span class="tabBtn" onclick="openTabs(event , 'tab1')">HTML</span>
<span class="tabBtn" onclick="openTabs(event , 'tab2')">CSS</span>
<span class="tabBtn" onclick="openTabs(event , 'tab3')">JavaScript</span>
</header>
<div class="tabHolder">
<div class="tabContent" id="tab1">
<img src="images/html.png">
<p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>
</div>
<div class="tabContent" id="tab2">
<img src="images/css.png">
<p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
</div>
<div class="tabContent" id="tab3">
<img src="images/js.jpg">
<p>JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: righteous;
}
body {
width: 100%;
height: 100vh;
background: #f5f7f8;
display: flex;
justify-content: center;
align-items: center;
}
.tabContainer {
width: 60%;
height: 70%;
background: #fff;
box-shadow: 0 10px 25px -3px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
border-radius: 10px;
}
header {
background: #2979FF;
color: #fff;
border-radius: 10px 10px 0 0;
padding: 12px 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
height: 10%;
position: relative;
}
#indicator {
position: absolute;
left: 0;
height: 4px;
width: 0;
bottom: 0;
background: #FFC107;
border-radius: 10px 10px 0 0;
transition: 0.3s;
}
.tabBtn {
font-size: 1.2rem;
padding: 0 18px;
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
}
.tabBtn:hover {
opacity: 1;
}
.tabHolder {
width: 100%;
height: 90%;
background: #fff;
border-radius: 0 0 10px 10px;
overflow: hidden;
}
.tabContent {
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0 20px;
animation: animate 1s;
}
.tabContent img {
height: 130px;
height: 130px;
margin-bottom: 30px;
}
.tabContent p {
width:85%;
font-size: 1.1rem;
text-align: justify;
}
.active {
opacity: 1;
color: #FFC107;
}
@keyframes animate {
0%{
opacity: 0;
}
100% {
opacity: 1;
}
}
JavaScript :
var indicator = document.querySelector('#indicator');
var tabBtn = document.querySelectorAll('.tabBtn');
function moveIndicator(e) {
indicator.style.left = e.offsetLeft + 'px';
indicator.style.width = e.offsetWidth + 'px';
}
tabBtn.forEach(item => {
item.addEventListener("click" , (e)=> {
moveIndicator(e.target);
});
});
function openTabs(evnt , tabId) {
var i , tabBtn , tabContent ;
tabBtn = document.querySelectorAll('.tabBtn');
tabContent = document.querySelectorAll('.tabContent');
for(i=0;i<tabContent.length;i++){
tabContent[i].style.display = "none";
}
for(i=0;i<tabBtn.length;i++){
tabBtn[i].className = tabBtn[i].className.replace(" active", "");
}
document.getElementById(tabId).style.display = "flex";
evnt.currentTarget.className += " active";
}
Page updated
Google Sites
Report abuse