9.tabs

<!DOCTYPE html>

<head>

<title>Custom Tabs</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

text-align: center;

background-color: #d4dbea;

}

h1{

font-size: 50px;

color: rgb(115, 0, 255);

margin-bottom: 40px;

}

.button-wrapper{

display: flex;

justify-content: center;

align-items: center;

gap: 15px;

}

.button-wrapper button {

border: none;

padding: 12px 20px;

background-color: #073dab;

color: #fff;

font-weight: bold;

letter-spacing: 3px;

font-size: 18px;

cursor: pointer;

}

.button-wrapper button.active {

background-color: #000;

}

.content{

display: none;

font-size: 20px;

font-weight: bolder;

margin-top: 50px;

}

.content.active {

display: block;

}

</style>

</head>

<body>

<h1>Custom Tabs</h1>

<button data-id="services" class="tab-button">Services</button>

<button data-id="projects" class="tab-button">Projects</button>

<button data-id="portfolio" class="tab-button">Portfolio</button>

<button data-id="contact" class="tab-button">Contact</button>

</div>

<p id="home" class="content active">This is the Home Section</p>

<p id="services" class="content">This is the Services Section</p>

<p id="projects" class="content">This is the Projects Section</p>

<p id="portfolio" class="content">This is the Portfolio Section</p>

<p id="contact" class="content">This is the Contact Section</p>

</div>

const tabContainer = document.querySelector(".container");

const tabButtons = document.querySelectorAll(".tab-button");

const tabContents = document.querySelectorAll(".content");

tabContainer.addEventListener("click", (event) => {

console.log(event.target.dataset);

const currentId = event.target.dataset.id;

if (currentId) {

tabButtons.forEach((btn) => {

btn.classList.remove("active");

});

event.target.classList.add("active");

tabContents.forEach((content) => {

content.classList.remove("active");

});

const currentElement = document.getElementById(currentId);

currentElement.classList.add("active");

}

});

</script>

</body>

</html>