0

我正在编写完整的基于 AJAX 的网站。现在我正在做页面导航和内容显示而无需重新加载页面。这就是我决定这样做的方式：

<html>
<head>
    <!--CSS-->
        .hidden {display:none;}
</head>
<body>
    <!--Menu bar-->
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

    <!--Content blocks for different pages-->
    <div class="current" id="page1">
        <!--Page 1 content-->
    </div>
    <div class="hidden" id="page2">
        <!--Page 2 content-->
    </div>
    <div class="hidden" id="page3">
        <!--Page 3 content-->
    </div>

    <!--JS for managing pages links-->
    <script>
        $(document).ready(function() {
        });
        function loadPage1() {
            $('.current').hide();
            $('#page1').show().addClass('current');
        };
        function loadPage2() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
        function loadPage3() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
    </script>
</body>

1）首先，我们显示具有“当前”类的 page1 块，其他块具有“隐藏”类 2）当我们单击 loadPage2() 时，我们找到当前活动块（通过它的“当前”类）并将其隐藏，和显示 page2 块。

注意。我必须为第一个页面块使用隐藏的附加类，因为 $(document).ready(function() {$('#page2').hide();$('#page3').hide();} ); 似乎有点慢，用户可能会在页面完全加载之前注意到一些奇怪的事情。

虽然我的解决方案有效，但也存在一些问题：

* 1) *实际上，对于JS禁用的用户，我仍然需要做真实的页面，只是显示不同的开始块。这意味着我将不得不做很多相似的页面，但有一个区别——隐藏和显示不同的起始块。如果 Google 抓取我的网站，它不会认为我的网站内容加倍并禁止它吗？

* 2) *例如，第 2 页有大图。当页面开始时 - 它是隐藏的。但是，即使一开始不会显示，也需要很长时间才能加载它。如何管理它？按需加载内容？我的意思是创建 6 个模板文本文件，当用户请求页面时，JS 从文件中加载页面内容并将其放入 div？

可能看起来有点乱，但提前谢谢！

4

1 回答 1

1

首先，我建议您在此处阅读可抓取 Ajax 页面的文档
https://developers.google.com/webmasters/ajax-crawling/

对于您的示例，这是不好的做法，Google 不喜欢onclick="loadPage1(); return false;链接

<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

它更好

<a href="link_to_real_page_for_JS-disabled-users" data-page="#page1">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page2">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page3">Page3</a>

并像这样修改您的脚本代码

<script>
//$(document).ready alternative
$(function () {
    //cache links so you can access faster for later use.
    var $links = $("a[data-page]").on("click", function (e) {
        var $this = $(this),
            page = $this.data("page");
        $(page).addClass("current")
            .siblings("div.current").removeClass("current").hide()
            .end().show();
        e.preventDefault();
    });
});
</script>

您可以更多地优化代码，顺便说一下我没有测试代码。

于 2012-06-03T11:23:17.173 回答