https://youtu.be/Nestt4vagvM
Index.html
Tab Menu - codeopacity
Home
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam iure magni dolore, impedit nostrum asperiores vitae adipisci corrupti quibusdam molestiae obcaecati praesentium odit quam earum atque dolores dignissimos aperiam? Possimus.
Profile
Lorem ipsum dolor sconsectetur adipisicing elit. Nam iure magni dolore, impedit nostrum asperiores vitae adipisci corrupti quibusdam molestiae obcaecati praesentium odit quam earum atque dolores dignissimos aperiam? Possimus.
Message
Lorem ipsum dolor sit amet con isicing elit. Nam iure magni dolore, impedit nostrum asperiores vitae adipisci corrupti quibusdam molestiae obcaecati praesentium odit quam earum atque dolores dignissimos aperiam? Possimus.
Style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: grid;
place-items: center;
min-height: 100vh;
}
.tabs-wrapper {
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 2px 1px 20px #ddd;
/* height: 300px; */
max-width: 550px;
overflow: hidden;
}
ul {
list-style: none;
padding: 0;
}
.nav-tabs {
display: flex;
}
.nav-tabs li {
border: 1px solid #ddd;
}
.nav-tabs li.tab {
padding: .5rem 1.5rem;
cursor: pointer;
border-radius: 5px;
margin-right: .5rem;
transition: all .3s ease 0s;
font-weight: 500;
}
.nav-tabs .tab.is-active {
background: #4060ff;
color: #fff;
}
.tab-panel {
display: none;
}
.tab-panel p {
line-height: 1.6;
}
.tab-panel.is-active {
display: block;
}
Script.js
const tabs = document.querySelectorAll('.tab');
const tabContent = document.querySelectorAll('.tab-panel');
tabs.forEach((tab) => {
tab.addEventListener('click',()=>{
const target = document.querySelector(tab.dataset.target);
tabContent.forEach((tc) => {
tc.classList.remove('is-active');
});
target.classList.add('is-active');
tabs.forEach((t) => {
t.classList.remove('is-active');
});
tab.classList.add('is-active');
})
});