Frame/iFrame etkileşimi
Merhaba, index.html, sol_menu.html, sag_icerik.html adında 3 dosyam var.
index sayfasında frame olarak sol menu ve sağ içerik sayfalarını çalıştırıyorum.
istediğim olay ise basit bir şekilde soldaki menüde 1. kategoriye basınca sağ taraftaki içerik alanında 1 numaralı html dosyasını açmasını istiyorum, 2. kategoriye basınca 2 numaralı html dosyasını göstermesini istiyorum. frame kullanmamın nedeni bu sayfaları açarken sol tarafta bulunan bölümün gitmesini istemiyorum. çok basit bir şekilde örnek ile yardımcı olabilir misiniz?
- index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menü Örneği</title>
</head>
<body>
<!-- Sol Menü -->
<div id="solMenu">
<ul>
<li><a href="#" onclick="loadContent('sol_menu.html')">Kategori 1</a></li>
<li><a href="#" onclick="loadContent('sag_icerik.html')">Kategori 2</a></li>
<!-- Diğer kategorileri buraya ekleyebilirsiniz -->
</ul>
</div>
<!-- Sağ İçerik Alanı -->
<div id="sagIcerik">
<!-- İlk açılışta görüntülenecek içerik -->
<iframe src="sol_menu.html" width="100%" height="500px" frameborder="0"></iframe>
</div>
<script>
function loadContent(htmlDosya) {
// Sağ içerik alanına iframe üzerinden HTML dosyasını yükle
document.getElementById("sagIcerik").innerHTML = `<iframe src="${htmlDosya}" width="100%" height="500px" frameborder="0"></iframe>`;
}
</script>
</body>
</html>
Bu örnek, sol menüdeki her kategoriye tıklandığında loadContent fonksiyonunu çağırarak sağ içerik alanındaki iframe'e ilgili HTML dosyasını yükler. Uygulamayı daha da genişletmek için kategori sayısını artırabilir ve dosya adlarını güncelleyebilirsiniz.