我的目标:
- 使用我的所有输出生成一个 HTML 文档，以便可以将其作为一个单元进行复制。
- 在该文档中有多个“页面”来显示数据的不同部分。
- 让浏览器的后退按钮做正确的事，并支持深层链接。
使用 :target 伪类只显示我正在查看的页面(div {display: none} :target {display: block})相对容易。
我想添加两个改进:
- 突出显示当前页面名称的导航栏。
- 当 URL 中没有片段标识符(
#之后的东西)时出现的主页面。
我创建了一个使用空 div 和兄弟选择器的解决方案。 target元素(ID在URL片段标识符中的元素)是一个空的div，target，然后我的CSS说#target1 ~ #page1 { ... } #target1 ~ #link1 { ... } 。有关完整示例，请参阅此 Fiddle ;请注意，在点击导航栏中的链接后，后退和前进浏览器按钮的工作方式与人们合理预期的一样(我认为无法使用 jsfiddle 演示深层链接)。
此解决方案存在三个缺点:
- 在我的 CSS 中，每个页面都有一个单独的选择器，如果页面很多，它会变得笨拙。
- 后退按钮适用于 Chrome 和 Firefox，但 Edge 似乎不喜欢这个(我没有在其他地方测试过)。我的理解是 the spec is unclear关于
:target和后退按钮(另见 Webkit bug )。 - 正如问题的标题所说，感觉我在滥用……某样东西。
我的问题是，是否有更好的方法来完成我想做的事情？我稍微倾向于不使用 JavaScript(主要是因为这使得深层链接更明显地正确)。
最佳答案
@Seika85 链接(在评论中)到 Navigo，这是一个 Javascript 路由器，似乎专为执行此操作而构建。我已经更新了 fiddle而是使用它，这消除了我提到的所有缺点，而不得不使用(一小部分)Javascript 的(小)费用。谢谢!
new Navigo(null, false)
.on(/target(.)/, function(x) {
$('.active').removeClass('active');
$('#page'+x).addClass('active');
$('#link'+x).addClass('active');
})
关于css - 滥用 :target to style multiple elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38342392/