Belajar design web memang tidak ada habisnya,tapi ada mulanya gess,,salah satunya membaca artikel saya ini😅.
Langsung saja ke konten,jadi saya membuat template sederhana untuk konsep one page dengan javascript kita sembunyikan elemen html yang belum atau tidak ingin di munculkan.
1.Meyembunyikan element ketika salah satu element terbuka
Berikut adalah contoh kode JavaScript yang akan menyembunyikan content1 dan content2 ketika content3 terbuka, dan mengatur dua tab lainnya menjadi "none":
<!DOCTYPE html>
<html>
<head>
<script>
function toggleContent(id) {
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
if (id === "content3") {
content1.style.display = "none";
content2.style.display = "none";
} else {
content1.style.display = "block";
content2.style.display = "block";
}
}
</script>
</head>
<body>
<button onclick="toggleContent('content1')">Show Content 1</button>
<button onclick="toggleContent('content2')">Show Content 2</button>
<button onclick="toggleContent('content3')">Show Content 3</button>
<div class="content" id="content1" style="display: none;">
Content 1
</div>
<div class="content" id="content2" style="display: none;">
Content 2
</div>
<div class="content" id="content3" style="display: none;">
Content 3
</div>
</body>
</html>
2.Control Dengan Button
Kode berikut membutuhkan button clik untuk mengaktifkan atau non aktifkan.<!DOCTYPE html><html><head><style>.content {display: none;}</style><script>function toggleContent(id) {var content1 = document.getElementById("content1");var content2 = document.getElementById("content2");var content3 = document.getElementById("content3");if (id === "content1") {content1.style.display = "block";content2.style.display = "none";content3.style.display = "none";} else if (id === "content2") {content1.style.display = "none";content2.style.display = "block";content3.style.display = "none";} else if (id === "content3") {content1.style.display = "none";content2.style.display = "none";content3.style.display = "block";}}</script></head><body><button onclick="toggleContent('content1')">Show Content 1</button><button onclick="toggleContent('content2')">Show Content 2</button><button onclick="toggleContent('content3')">Show Content 3</button><div class="content" id="content1">Content 1</div><div class="content" id="content2">Content 2</div><div class="content" id="content3">Content 3</div></body></html>
3. Inisialisasi dengan tanpa button click
<!DOCTYPE html><html><head><style>.content {display: none;}</style><script>function hideOtherTabs(currentTabId) {var tabs = document.getElementsByClassName("content");for (var i = 0; i < tabs.length; i++) {var tab = tabs[i];if (tab.id === currentTabId) {tab.style.display = "block";} else {tab.style.display = "none";}}}document.addEventListener("DOMContentLoaded", function() {var tabs = document.getElementsByClassName("content");for (var i = 0; i < tabs.length; i++) {var tab = tabs[i];tab.addEventListener("click", function() {hideOtherTabs(this.id);});}});</script></head><body><div class="content" id="content1">Content 1</div><div class="content" id="content2">Content 2</div><div class="content" id="content3">Content 3</div></body></html>
Jangan Lupa subcribe chanel kita ya gess,diskusi di kolom komentar.
