-1

我正在尝试编写我的第一个单页应用程序。这个想法是有 1 个包含许多<div>标签的 HTML 文件；其中每个<div>代表一个网页“页面”。然后应用程序<div>一次只显示 1，并隐藏其他。这样，当用户浏览我的应用程序时，我实际上只是显示/隐藏不同的“页面”div，并给人一种单页应用程序的错觉。

附加要求是：

  • 这是一个 HTML5 应用程序
  • 每个页面 div 也必须映射其自己的可收藏 URL（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和文件的 JSFiddlemyapp.js在这里：

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

这个想法是，用户可以单击“导航栏”中的链接之一（“主页”、“关于”、“联系方式”）并被带到代表该特定页面的“页面”（div）。如您所见，默认的“页面”应该是HOME，这意味着这是您应该能够看到的唯一 div。但是所有的页面 div 都是可见的，没有一个是隐藏的。在我能够正确显示/隐藏页面 div 之前，我无法真正测试路由/历史功能。我是否以某种方式错误地配置了 Crossroads/Hasher？

4

1 回答 1

4

我认为有一个解决方案可以满足您的要求。这是一种非常简单、轻量级的方法，不需要任何 JavaScript，只需借助 CSS 的强大功能。;-)

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

所以让我先解释一下 的概念：当URL 中:target的片段标识符（或哈希，例如#contentid ）与HTML 元素的 相同时，伪选择器匹配。如果我们有一个类似的 URL，并且一个带有选择器http://www.example.com/hallo.html#content的元素将匹配。id="content"#content:target { ... }

在这个fiddel中你看不到 URL ，但在另一个例子中你会看到。她是小提琴的代码：

HTML：

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

CSS：

#content {
    border: 1px solid black;
    padding: 20px;
}

#content:target {
    background: lightblue;
}

该:target方法导致了这个简化的示例来解释页面导航想法：http: //jsfiddle.net/Cxr73/1/同样，您无法真正看到带有片段标识符的 URL。

HTML：

<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>

CSS：

.div2Inner, .div3Inner, 
#div2:target .div1Inner, #div3:target .div1Inner {
    display: none;
}

#div2:target .div2Inner, #div3:target .div3Inner {
    display: block;
}

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

关于标记的一些建议：

  • 根据HTML5 规范（4.2.5.5 指定文档的字符编码）的建议，尽早添加您的字符集声明以避免 IE 中潜在的与编码相关的安全问题。它应该出现在前 1024 个字节中。
  • 该<center>元素已被弃用，因为它定义了其内容的呈现方式。为此，我们有 CSS。
  • 您正在编写一个HTML5应用程序，因此请添加一些语义标记，例如：、、、、nav等元素。headersectionfooter

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

小提琴： http: //jsfiddle.net/Cxr73/2/ 最终看到片段标识符加上实际:target操作和用于测试目的的另一个 URL：DEMO ...这个演示将在几天后消失，但小提琴会留下来。

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

于 2014-06-04T02:24:07.763 回答