jquery - 仅当目标指定为 id 时才显示元素

Question

我的 HTML 中有几个部分带有与其他部分相对应的链接，如下所示:

<section class="sections" id="foo">
    <p>Foo Section</p>
    <img src="foo_image.jpg" />
    <a href="#blah">Go to blah</a>
</section>​
<section class="sections" id="blah">
    <p>Blah Section</p>
    <img src="blah_image.jpg" />
    <a href="#foo">Go to foo</a>
</section> 

我目前正在使用以下 CSS 来仅显示目标部分:

section {
    opacity: 0; 
    height: 0;
}

section:target {
    opacity: 1;
    height: auto;
}

这行得通。问题是我需要用户看到第一部分才能访问其他部分中的链接，这使得所有部分从一开始就不可查看。

有没有办法只在部分目标等于指定 id 时显示元素？

Answer 1

如果您能够按照您的标签建议使用 jQuery，那么设置该部分在第一次显示时会更容易，然后再将其删除:

编辑:更改为 JS 和 HTML 以帮助解决存在时使用哈希的能力问题

HTML:

<section class="sections" id="foo">
    <p>Foo Section</p>
    <img src="foo_image.jpg" />
    <a href="#blah">Go to blah</a>
</section>
<section class="sections" id="blah">
    <p>Blah Section</p>
    <img src="blah_image.jpg" />
    <a href="#foo">Go to foo</a>
</section> 

CSS:

section {
    opacity: 0; 
    height: 0;
}

section:target, .show{
    opacity: 1;
    height: auto;
}

jQuery:

if(!window.location.hash.length)
{
    $("#foo").addClass("show").find("a").on("click", function(){
        $(this).off("click").closest(".sections").removeClass("show");
    });
}

备选方案:忘了说你总是可以这样做:

if(!window.location.hash.length)
{
   window.location.hash = "foo";
}