v2.5.2
Giriş yap

Sayfa yenilenmeden içerik değiştirmek

Anonim
1,421 defa görüntülendi

Merhaba,

Prototürk gibi header ve menüyü sabit bırakacak şekilde geri kalan içeriği sayfa yenilenmeden değiştirmeyi nasıl sağlayabilirim?
Bunlarla ilgili 1-2 tane kütüphane bulmuştum ama kaybettim.

onlywhatchess
1370 gün önce

AJAX ile yapmak mümkün


<nav>
    <ul>
        <li><a href="#" id="anasayfa">Anasayfa</a></li>
        <li><a href="#" id="iletisim">İletişim</a></li>
        <li><a href="#" id="hakkimizda">Hakkımızda</a></li>
    </ul>
</nav>

<div class="container">
    <h1>Anasafya</h1>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

$('nav ul li a').click(function () {
    $.post('getPage.php',{
        sayfa: $(this).attr('id')
    },function(response) {
        $('.container').html(response);
    });
});

// getPage.php sayfası için
switch($_POST['sayfa']):
    case 'anasayfa':
        include_once 'anasayfa.php';
    break;
    case 'iletisim':
        include_once 'iletisim.php';
    break;
    default:
        include_once 'hakkimizda.php';
endswitch;

// ansayfa.php sayfası için
echo '<h1>Anasayfa</h1>';

// iletisim.php sayfası için
echo '<h1>İletişim</h1>';

// hakkimizda.php sayfası için
echo '<h1>Hakkımızda</h1>';