Javascript JS-关于完整AJAX网站的几个问题-GoogleBot、优化、模板_Javascript_Jquery_Ajax_Templates

Javascript JS-关于完整AJAX网站的几个问题-GoogleBot、优化、模板

javascript jquery ajax templates

Javascript JS-关于完整AJAX网站的几个问题-GoogleBot、优化、模板,javascript,jquery,ajax,templates,Javascript,Jquery,Ajax,Templates,我正在写一个完整的基于AJAX的网站。现在，我正在进行页面导航和内容显示，无需重新加载页面。我就是这样决定的： <html> <head>  .hidden {display:none;} </head> <body>  <a href="link_to_real_page_for_JS-disabled-users" oncli

我正在写一个完整的基于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>


.hidden{显示：无；}
$（文档）.ready（函数（）{
});
函数loadPage1（）{
$（'.current'）.hide（）；
$（'#page1'）.show（）.addClass（'current'）；
};
函数loadPage2（）{
$（'.current'）.hide（）；
$（'#page2'）.show（）.addClass（'current'）；
};
函数loadPage3（）{
$（'.current'）.hide（）；
$（'#page2'）.show（）.addClass（'current'）；
};

1）首先，我们将显示类为“current”的page1块，其他块的类为“hidden” 2）当我们单击loadPage2（）时，我们会找到当前活动的块（通过它的类“current”）并隐藏它，以及ShowPage2块

NB.我必须为第一个页面块使用额外的隐藏类，因为$（document）.ready（function（）{$（'#page2'）.hide（）；$（'#page3'）.hide（）}）；看起来有点慢，用户可能会在页面完全加载之前注意到一些奇怪的事情

虽然我的解决方案可行，但仍存在一些问题：

*1） *实际上，对于JS disabed用户，我仍然需要做真正的页面，只是显示了不同的起始块。这意味着我将不得不做很多类似的页面，但有一个不同之处——隐藏和显示不同的起始块。如果谷歌爬行我的站点，它不会把我的站点看作是内容加倍而禁止它的吗？ *2） *例如，第2页有大图像。当页面开始时，它是隐藏的。然而，它将需要大量的时间来加载它，即使它不会显示在第一次。如何管理？按需加载内容？我的意思是创建6个模板文本文件，当用户请求一个页面时，JS从文件中加载一个页面内容并将其放入div

可能看起来有点凌乱，但请提前感谢

首先，我建议您在此处阅读可爬行Ajax页面的文档

就你的例子来说，谷歌不喜欢链接中的

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>


//$（文档）。准备好了吗
$（函数（）{
//缓存链接，以便您可以更快地访问以供以后使用。
var$links=$（“a[数据页]”）。在（“单击”上，函数（e）{
变量$this=$（this），
页面=$this.data（“页面”）；
$（第页）.addClass（“当前”）
.sides（“div.current”）.removeClass（“current”）.hide（）
.end（）.show（）；
e、 预防默认值（）；
});
});

<>你可以优化代码，顺便说一下我没有测试代码.< /p>麻省理工学院，如果我正确理解了，数据页=“*page 1”技巧可以帮助我摆脱页面复制，当谷歌找到这些链接时，它会考虑为3个不同的页面吗？谢谢！