Question

我正在尝试编写我的第一个单页应用程序。我们的想法是拥有一个包含许多<div>标签的HTML文件;其中每个<div>代表一个网页＆＃34; page＆＃34;。然后，应用程序一次只显示1 <div>，并隐藏其他应用程序。通过这种方式，当用户浏览我的应用时，我真的只是显示/隐藏不同的＆＃34;页面＆＃34; divs，并给出单页应用程序的错觉。

其他要求是：

这是一个HTML5应用
每个网页div也必须映射其自己的可收藏网址（http://myapp.example.com/#fizz，http://myapp.example.com/#buzz等。）
每个页面div都可以收藏，应用程序必须使用HTML5历史记录api

我决定使用Crossroads进行路由，使用Hasher进行历史记录。另一个主要竞争者是AngularJS，但最终我决定反对AngularJS，因为它对于我在这里尝试做的事情来说太重了，而且似乎有更陡峭的学习曲线。

到目前为止，我的项目具有以下目录结构：

myapp/
    index.html
    myapp.js
    myapp.css
    signals.min.js          <-- Required by both Crossroads and Hasher
    crossroads.min.js
    hasher.min.js

包含我的index.html，myapp.css和myapp.js文件的JSFiddle位于：

http://jsfiddle.net/Sxfms/2/

这个想法是用户可以点击＆＃34; navbar＆＃34;中的一个链接。（＆＃34; Home＆＃34;，＆＃34;关于＆＃34;，＆＃34;联系＆＃34;）并被带到＆＃34;页面＆＃34; （div）代表该特定页面。正如您所看到的，默认的＆＃34;页面＆＃34;应该是HOME，这意味着这是你应该能够看到的唯一div。但是所有的页面div都是可见的，没有一个是隐藏的。直到我可以正确显示/隐藏页面div，我无法真正测试路由/历史记录功能。我是否以某种方式配置了Crossroads / Hasher？

Answer 1

我认为有一个满足您要求的解决方案。这是一个非常简单，轻量级的方法，只需要CSS的强大功能就不需要任何javascript。 ; - ）

整个方法的关键是CSS伪类选择器:target。

首先让我解释:target的概念：伪选择器匹配URL中的片段标识符（或哈希， #content ）和{{1}一个HTML元素是相同的。如果我们有一个类似id的网址和一个http://www.example.com/hallo.html#content的元素，则选择器id="content"会匹配。

您无法在此 fiddel 中看到该网址，但您将在另一个示例中看到该网址。她是小提琴的代码：

HTML：

#content:target { ... }

CSS：

<a href="#content">content</a>
<div id="content">
    Markup is poetry!
</div>

#content { border: 1px solid black; padding: 20px; } #content:target { background: lightblue; }方法导致这个精简的示例解释了页面导航的想法：http://jsfiddle.net/Cxr73/1/再次，您无法真正看到带有片段标识符的URL

HTML：

:target

CSS：

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>

<div id="div2">
    <div id="div3">
        <div class="div1Inner">content div1</div>
        <div class="div2Inner">content div2</div>
        <div class="div3Inner">content div3</div>
    </div>
</div>

隐藏最初不应显示的所有.div2Inner, .div3Inner, #div2:target .div1Inner, #div3:target .div1Inner { display: none; } #div2:target .div2Inner, #div3:target .div3Inner { display: block; }：div。所以只有.div2Inner, .div3Inner { display: none;}可见。当片段标识符是URL的一部分时显示相应的<div class="div1Inner">content div1</div>：div。最后，当#div2:target .div2Inner, #div3:target .div3Inner {display: block;}或div1可见时，您必须隐藏div2：div3。结合第一个和最后一个CSS选择器，你就可以看到上面显示的CSS了。

关于标记的一些建议：

根据the HTML5 spec的建议（4.2.5.5指定文档的字符编码），尽早添加charset声明以避免IE中潜在的encoding-related security issue。它应该是前1024个字节。
{@ 1}}元素已弃用，因为它定义了其内容的表示形式。为此，我们有CSS。
您正在编写 HTML5 应用，因此请添加一些语义标记，例如：#div2:target .div1Inner, #div3:target .div1Inner { display: none; }，<center>，nav，{{1}等等。

在这里你有我的想法的最终方法，你的CSS加上header选择器（从第600行开始）以及我认为是干净的标记：

小提琴：http://jsfiddle.net/Cxr73/2/ 要最终看到片段标识符加上section正在运行并出于测试目的而使用另一个网址： DEMO ...此演示将在几天后消失，但小提琴将会消失留下来。

我认为这几乎可以满足您的所有需求。玩得开心！

单页应用程序路由w / Crossroads＆amp;以哈希为例

1 个答案: