Sayfalar arası geçiş önerisi

111520

Megapat
Katılım
16 Mayıs 2016
Mesajlar
1.322
Çözümler
3

Görseldeki gibi bir header olacak ve tıkladığımda o linkteki içerikler gözükecek sayfada. Hepsinde bir kaç adet fotoğraf olacak, büyük bir şey değil. index dosyasının içinde mi yapmak mantıklı yoksa ayrıca hepsine tek tek sayfa açıp onun içinde mi çalışmak daha sağlıklı?
 
Son düzenleyen: Moderatör:
Ayrı sayfalarda çalışmak daha sağlıklı olacaktır. Mesela burada konu açarken açılan sayfa normalde ayrı bir sayfa. Iframe özelliği ile sayfa içinde sayfa olarak açılıyor.
 
Hocam sana tavsiyem ayrı ayrı yapman. İleride siteni büyütürsen çok sıkıntı çekebilirsin. Farklı linklere vermek işini kolaylaştırır.
 
jQuery ile sayfa yükleyebilirsin. id'den nesneyi divine göre temizler oynar durursun. Örnek olması için şöyle vereyim mesela;

script.js;
JavaScript:
let page = document.getElementById("page");
let anasayfa = document.getElementById("anasayfa");
let hakkinda = document.getElementById("hakkinda");

function pageLoad(pageName, caller) {
    document.querySelectorAll("#navbar .btn").forEach(element => {
        element.classList.remove("active");
    })
    caller.classList.add("active");
    page.innerHTML = "";
    $("#page").load(pageName + ".html");
}
anasayfa.addEventListener("click", () => {
    pageLoad("anasayfa", anasayfa);
})

hakkinda.addEventListener("click", () => {
    pageLoad("hakkinda", hakkinda);
})
index.html;
HTML:
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
    <div class="p-3 d-flex justify-content-center">
        <div class="btn-group" role="group" id="navbar">
            <a class="btn btn-light" id="anasayfa">Anasayfa</a>
            <a class="btn btn-light" id="hakkinda">Hakkında</a>
            <a class="btn btn-light" id="iletisim">İletişim</a>
        </div>
    </div>
    <div class="m-3 card">
        <div class="card-body">
            <div class="d-flex" id="page">
            </div>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

Not: Linklerin bir kısmı bootstrap için. Tasarımla uğraşmak istemediğimden fakat yine de kolayca görünsün istediğimden ekliyorum.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…