交换页面内容的javascript

下面是我试图完成的事情的一半。。

我正在尝试将html文件中的内容换入换出。java脚本文件设置为将幻灯片功能应用于我的div。请向我展示需要添加到javascript中的内容，以便允许信息交换和适当显示

首先是我的javascript文件，然后是index.html文件。还显示了头部的css，以显示我如何试图隐藏内容

请告诉我如何实现我缺少的javascript，然后在必要时对html和css进行适当的更改

$（文档）.ready（函数（）{
var hash=window.location.hash.substr（1）；
var href=$（'#导航菜单li a'）。每个（函数（）{
var href=$（this.attr（'href'）；
if（hash==href.substr（0，href.length-5））{
var toLoad=hash+'.html#content'；
$（“#内容”）.load（toLoad）
}                                           
});
$（“#导航菜单li a”）。单击（函数（）{
var toLoad=$（this.attr（'href'）+'#content'；
$（'content'）.hide（'fast'，loadContent）；
$（“#加载”）.remove（）；
$（“#包装器”）.append（'LOADING…'）；
$（'加载'）.fadeIn（'正常'）；
window.location.hash=$（this.attr（'href'）.substr（0，$（this.attr（'href'）.length-5）；
函数loadContent（）{
$（'#content'）.load（toLoad'，showNewContent（））
}
函数showNewContent（）{
$（'#content'）.show（'normal'，hideLoader（））；
}
函数hideLoader（）{
$（'加载'）.fadeOut（'正常'）；
}
返回false；
});
});
#第1页、第2页、第3页、第4页、第5页{
显示：无；
溢出：隐藏；
}












一整串的文字
一大堆的文字
3一大堆的文字3
4一大堆的文字4
5整串文字5

---

我建议您更改html，以便您的“页面”具有与关联菜单项的href实际对应的ID：

<a href="#home">Home</a>

...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>

请注意，无需使用

.load（）

，因为页面上已经有了所有内容。您可以清空容器，然后附加相关内容的克隆

演示：

或者在我看来，一个更简洁的选择是将所有内容移动到

#content

div中，首先默认显示

#home

“page”，然后只需在适当的位置隐藏和显示页面：

$(document).ready(function () {
    $("#navigationMenu a").click(function (e) {
        e.preventDefault();
        var item = this.href.split("#")[1];
        $(".pages:visible").slideUp(function () {
            $("#" + item).slideDown();
        });
    });
    $("#home").show();
});

演示：

最后要考虑的一点是：如果删除

.pages{display:none；}

CSS，而是使用jQuery隐藏页面，方法是将其添加到文档的开头：

$(".pages").hide();

---

然后你仍然会得到同样的效果：-除了如果用户碰巧禁用了JavaScript，页面仍然会工作，因为默认的锚导航将跳转到相关的div:

为什么你的内容div的

id

属性与应该链接的

href

属性不匹配打开它们？

id=“page1”

实际上不应该是

id=“home”

等等吗？因为在css中，我为导航栏设置了类。因此，这就是为什么我将div id设置为第1页、第2页等。但是当您单击一个链接时，比如说

href=“#home”

链接，您如何知道要导航到哪些隐藏页面？您需要某种方法将每个链接与其关联的内容关联起来—有几种方法可以做到这一点，但提供隐藏的div

id=“home”

、

id=“about”

等等是最明显的方法……我没有定义javascript来实现这一点。这就是我需要帮助的地方。我在html文档底部的每个div中添加了一个单独的类，这样就可以用java脚本找到它。因此，每个div都是page1 page2 page3等，然后当您单击

href=#home

它应该打开哪个div时，附加到所有五个div的类又被称为pagesSo？我只是想让您知道我什么时候将以您的名字命名我的第一个孩子。它的名字将是nnnnn。非常感谢你，你是我的英雄。这花了我12个小时，3个论坛和一大堆胡说八道的答案和教程，所有这些都让我找到了你！呜呜！谢谢我真的想问你怎么做，你却把我揍了一顿！再次感谢你，伙计！不客气。对于额外的编辑很抱歉：在我的上一个例子中，我一直在把html弄得一团糟，所以我最后更新了很多次。不管怎样，如果你用我的名字来命名你的长子，记得它是“nnnnnn”和六个n。我想我在这里遗漏了一些东西。。。我正试图让所有信息都像你说的那样隐藏和显示在同一个content div中。但是当我换成JSFIDLE时，它对我不起作用。。。内容一直隐藏着。除了第一个div onload，但是一旦我点击了一个链接，它就不会回来了，我最初发布的解决方案（）对我来说很好-只在Chrome中测试过。。。

$(document).ready(function () {
    $("#navigationMenu a").click(function (e) {
        e.preventDefault();
        var item = this.href.split("#")[1];
        $(".pages:visible").slideUp(function () {
            $("#" + item).slideDown();
        });
    });
    $("#home").show();
});

$(".pages").hide();