HTML, CSS এবং JavaScript দিয়ে ফুল-পেজ ট্যাব ইন্টারফেস বানানো
CSS এবং JavaScript ব্যবহার করে পূর্ণ স্ক্রিন ট্যাব ইন্টারফেস তৈরি করা যায়, যেখানে ট্যাব ক্লিক করলে কন্টেন্ট পরিবর্তন হয়।
সম্পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body, html {
height: 100%;
margin: 0;
}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 14px;
font-size: 15px;
width:33.33%;
}
.tablink:hover {
background-color: black;
}
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: blue;}
#About {background-color: gray;}
#Contact {background-color: orange;}
</style>
</head>
<body>
<button class="tablink" onclick="demo('Home', this, 'blue')">Home</button>
<button class="tablink" onclick="demo('About', this, 'gray')" id="clickme">About</button>
<button class="tablink" onclick="demo('Contact', this, 'orange')">ContactUs</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>This is the Home page.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>This is information about the company.</p>
</div>
<div id="Contact" class="tabcontent">
<h3>ContactUs</h3>
<p>Contact us for any feedback, query and complaints.</p>
</div>
<script>
function demo(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
document.getElementById("clickme").click();
</script>
</body>
</html>
আউটপুট (স্ক্রিনশট)
Home ট্যাব ডিফল্টভাবে সিলেক্টেড (clickme.click() দিয়ে)।
ContactUs ট্যাব ক্লিক করার পর
ব্যাখ্যা: JavaScript ফাংশন demo() সব ট্যাব কন্টেন্ট লুকিয়ে (display: none), ক্লিক করা ট্যাবের কন্টেন্ট দেখায় (display: block) এবং অ্যাক্টিভ ট্যাবের ব্যাকগ্রাউন্ড কালার পরিবর্তন করে। CSS-এ height:100% দিয়ে ফুল-পেজ করা হয়েছে।
