2

我创建了一个网站，使用 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 文档。
  • 一切正常，除了按钮。
  • 如果您想了解有关某事的更多信息，请告诉我。
  • 感谢您花时间阅读所有这些！
4

1 回答 1

0

解决“主页”按钮问题：

$(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。最佳的做法当然是让浏览器在刷新时仍然在网站的同一页面上，并且“按下”正确的按钮。当我最终弄清楚时，我会发布我的最终代码。只是想我会发布我到目前为止所做的事情，如果其他人正在查看这个并遇到同样的问题。

于 2013-10-07T16:44:18.230 回答