:target 伪类跟进答案

【问题标题】：:target pseudoclass follow-up:target 伪类跟进
【发布时间】：2015-10-09 23:04:48
【问题描述】：

我对此链接回答的问题进行了跟进： ckecked element number in :nth-child css rule

答案正是我正在寻找的，但我不知道如何在页面加载时将第一个选项卡设置为默认值？在上面的链接中说：“您可以使用哈希 #section1 调用页面”。谁能告诉我如何在代码中做到这一点？我已经尝试了很长时间，但似乎无法完成这项工作。

提前非常感谢！

【问题讨论】：

【解决方案1】：

在涉及:target 的纯 CSS 解决方案中，无论如何您都需要 JS 访问带有相应哈希的 URL（例如 location.hash = 'content1'）。

默认显示所有选项卡通常更灵活（包括禁用 JS 时），以及使用 JS 隐藏/显示/切换选项卡。

【讨论】：

【解决方案2】：

建议“您可以使用哈希 #section1 调用页面”的人指的是 URL：如果您的页面是 http://www.yoursite.com/yourpage，只需导航到 http://www.yoursite.com/yourpage#content1（content1 因为是示例中第一部分的 id你提供）。

我个人不喜欢这个解决方案，因为它不灵活且不可维护，但它适用于您的简单示例。

我会选择一个基于 js 的解决方案：一开始我只显示第一部分，然后点击我会隐藏所有并只显示所需的部分。

检查this（HTML + CSS + JS 和 jQuery）。

HTML：

和你提供的一样。

CSS：

section { display: none }
section:first-of-type { display: block; }

JS：

$('a').click(function(){
   $('section').hide();
   $($(this).attr('href')).show();
});

当然，您不需要 jQuery 来执行此操作，但为我编写它更快 :) 让我知道这是否有用。

【讨论】：

非常感谢您的回答！这正是我正在寻找的。但是，我似乎无法让我自己的文件像您的小提琴一样工作。我将我的 CSS 文件调整为与您的重复。然后我将 JS 代码包含在中。这是错的吗？我是一个完全的菜鸟，所以我非常感谢你的帮助！
你包含了 jQuery 吗？