使用jQuery，ajax和php創建動態內容。 但是我的導航欄不起作用

Question

我已經使用PHP include創建了一個網站，以獲取所有內容。 然后，我創建了一個內容頁面，該頁面是唯一刷新的頁面。 這也是唯一偽造信息/文本的頁面。 我已經使用jQuery，PHP和Ajax來做到這一點。

現在，所有這些都可以正常工作，並且應該正常工作，但是這為網站導航帶來了一些新問題。

導航只是列表中的一組鏈接。 但是只要單擊其中之一，我就做到了，以使它獲得具有新樣式的新類。 使用戶可以看到他/她在網站上的位置。 我已經使用.toggleClass方法使用javascript和jQuery完成了此操作。 這行得通，但是現在我要解決這個問題了。

所以這是交易：

每當我通過瀏覽器刷新網站時，.toggleClass信息都會丟失，並且按鈕也會丟失其類和樣式。 即使頁面沒有更改，也只是刷新。 同樣，當我單擊橫幅中的“主頁”按鈕以返回首頁時，也會發生相反的情況。 即使我不在該頁面上，激活了.toggleClass的最后一個按鈕仍保持其類和樣式，但返回到初始索引。

我知道我的代碼沒有那么令人印象深刻，並且可能有很多錯誤。 我還不是很熟練，我還在學習。 無論如何，有什么辦法可以解決此問題？ 還是僅僅是我做錯了什么？ 或者，也許有一種更簡便，更好的方法來制作這樣的網站？

這是我的代碼：

Index.php

<?php

    include("layout/header.php");
    include("content/content.php");
    include("layout/footer.php");

?>

load_page.php

<?php

if(!$_GET['page']) die("0"); {    
    $page = (int)$_GET['page'];

    if(file_exists('pages/page_'.$page.'.html')) {   
        echo file_get_contents('pages/page_'.$page.'.html');            
    } else { 
        echo 'There is no such page!';    
    }
}

?>

ajax.js

$(document).ready(function () {
    checkURL();

    $('ul li a').click(function (e) {
        checkURL(this.hash);
    });

    setInterval("checkURL()", 200);
});

var lasturl = ""; // storage

function checkURL(hash) {
    if (!hash) hash = window.location.hash;

    if (hash != lasturl) {
        lasturl = hash;
        loadPage(hash);
    }
}

function loadPage(url) // AJAX function
{
    url = url.replace('#page', '');

    $.ajax({
        type: "GET",
        url: "load_page.php",
        data: 'page=' + url,
        dataType: "html",
        success: function (msg) {
            if (parseInt(msg) != 0) {
                $('#pageContent').html(msg);
            }
        }
    });
}    

javascript.js

$(document).ready(function(){    
    $('.button').click(function(){     
        $('.buttonselected').removeClass('buttonselected');
        $(this).toggleClass('buttonselected');          
    });    
});

我不會發布我所有的HTML和CSS代碼，這太過分了。 我已經發布了大量代碼。 但是，這里是您可能需要的必需品。

我的導航包含通過Ajax生成的動態內容/頁面的鏈接。

<nav>                   
    <ul id="navigation">                        
        <li> <a class="button" href="#page1"> Frontpage </a> </li>
        <li> <a class="button" href="#page2"> Archive </a> </li>
        <li> <a class="button" href="#page3"> Stuff </a> </li>
        <li> <a class="button" href="#page4"> Portfolio </a> </li>                      
    </ul>                       
</nav>

通過ajax和php添加頁面的內容頁面。

content.php

<div id="pageContent">

 <!-- content comes here -->

</div>

最后只是一些注意事項：

• 是的，我正在鏈接到jQuery文檔。
• 一切正常，按一下按鈕。
• 讓我知道是否需要有關某事的更多信息。
• 感謝您抽出寶貴的時間閱讀所有這些內容！

Answer 1

解決“主頁”按鈕問題：

$(document).ready(function(){

    $('.button').click(function(){ 

        $('.buttonselected').removeClass('buttonselected');
        $(this).toggleClass('buttonselected'); 

    });

    $('.ce').click(function(){

        $('.buttonselected').removeClass('buttonselected');
        $('#frontpage').toggleClass('buttonselected'); 

    });

});

其中的“ .ce”是橫幅中“主頁”按鈕的類，“＃frontpage”是在按下鏈接並且頁面返回索引后需要獲取新類的按鈕的ID。

“解決”刷新問題：

將此代碼添加到內容頁面。

$(document).ready(function(){

    location.href = "#page1" 

});

將此代碼添加到＃page1中。

<script type="text/javascript">

$(document).ready(function(){

    $('.buttonselected').removeClass('buttonselected');
    $('#frontpage').toggleClass('buttonselected');

});

這樣一來，無論何時刷新頁面，它都會返回首頁。 它還使每當有人第一次訪問該網站時，他們都將看到正確的首頁，並且同時首頁按鈕將具有.toggleClass樣式，以指示他們在頁面上的位置。

但是，這仍然不是一個好的解決方案。 最佳的選擇當然是使它成為可能，以便每當刷新瀏覽器時，它仍位於網站的同一頁面上，並且帶有正確的按鈕“被按下”。 最終找出答案后，我將發布最終代碼。 只是以為我會發布到目前為止我已經做過的事情，如果其他人正在研究這個問題並且遇到同樣的問題。