Question

我的目标：

使用我的所有输出生成单个HTML文档，以便将其作为一个单元进行复制。
有多个＆＃34;页面＆＃34;在该文档中显示数据的不同部分。
让浏览器的后退按钮执行正确的操作，并支持深层链接。

使用：target伪类相对容易，只显示我正在查看的页面（div {display: none} :target {display: block}）。

我想添加两个改进：

导航栏，突出显示当前页面的名称。
网址中没有片段标识符（#之后的内容）时显示的主页面。

我使用空div和兄弟选择器创建了一个解决方案。目标元素（ID在URL片段标识符中的元素）是一个空div target，然后我的CSS说#target1 ~ #page1 { ... } #target1 ~ #link1 { ... }。有关完整示例，请参阅此Fiddle;请注意，在点击导航栏中的链接后，后退和前进浏览器按钮可以合理地预期（我不认为可以使用jsfiddle演示深层链接）。

此解决方案有三个缺点：

我的CSS中每个页面都有一个单独的选择器，如果有很多页面，它会变得难以处理。
后退按钮适用于Chrome和Firefox，但Edge似乎并不喜欢这样（我还没有在其他任何地方对其进行测试）。我的理解是the spec is unclear关于:target和后退按钮（另请参阅此Webkit bug）。
正如问题的标题所说，感觉就像我在滥用......。

我的问题是，有没有更好的方法去做我想做的事情？我略微偏爱没有JavaScript（主要是因为这使深层链接更明显正确）。

Answer 1

@ Seika85链接（在评论中）到Navigo，这是一个Javascript路由器，看起来就是这样做的。我更新了fiddle来代替使用它，这消除了我提到的所有缺点，在（小）费用上必须使用（一小部分）Javascript。谢谢！

new Navigo(null, false) 
.on(/target(.)/, function(x) {
  $('.active').removeClass('active');
  $('#page'+x).addClass('active');
  $('#link'+x).addClass('active');
})

滥用：定位多个元素的样式

1 个答案: