javascript - 使用 jQuery、ajax 和 php 创建动态内容。但是我的导航栏不起作用

Question

我已经使用 PHP include 创建了一个网站来获取所有内容。然后我创建了一个内容页面，这个页面是唯一刷新的页面。它也是唯一一个信息/文本被隐藏的页面。我使用 jQuery、PHP 和 Ajax 来做到这一点。

现在，这一切都正常工作，但它在网站导航方面产生了一些新问题。

导航只是列表中的一组链接。但是每当单击其中一个时，我都会这样做，以便它获得具有新样式的新类。这样用户就可以看到他/她在网站上的位置。我已经使用 .toggleClass 方法使用 javascript 和 jQuery 完成了此操作。这行得通，但现在我要解决手头的问题了。

所以这是交易:

每当我通过浏览器刷新网站时，.toggleClass 信息就会丢失，按钮也会失去它的类和样式。即使页面没有更改，只是刷新了。此外，当我单击横幅中的“主页”按钮返回首页时，情况正好相反。激活 .toggleClass 的最后一个按钮保持其类和样式，即使我不再在该页面上，但返回到初始索引。

我知道我的代码不是那么令人印象深刻，并且其中可能有很多错误。我在这方面还不是很熟练，我还在学习。无论如何有办法解决这个问题吗？或者这只是我做错了什么？或者，也许有更简单更好的方法来制作这样的网站？

这是我的代码:

索引.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添加页面的内容页面。

内容.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 样式，指示它们在页面上的位置。

不过，这仍然不是一个好的解决方案，imo。最好的办法当然是让它在刷新浏览器时它仍然在网站的同一页面上并且“按下”正确的按钮。当我最终弄清楚时，我会发布我的最终代码。只是想如果其他人正在看这个并且有同样的问题，我会发布我到目前为止所做的事情。