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";
}

Answer 2

我认为类名是部分，在这种情况下，添加一个更具体的id规则，因为它可以覆盖由类规则指定的规则

.sections{
    opacity: 0; 
    height: 0;
}

.sections:target, #foo{
    opacity: 1;
    height: auto;
}

Answer 3

我已经对你的HTML进行了一些修改，但这是我如何做到的，使用jquery来隐藏其他部分。如果你想让用户点击第二部分你可以用.click更改事件。

HTML

<div class="menu">
<ul>
<li><a href="#foo">Click here</a></li>
    <li><a href="#blah">Click here</a></li>
</ul>
</div>
<section class="hidden" id="foo">
    <p>Foo Section</p>
    <img src="foo_image.jpg" />
    <a href="#blah">Go to blah</a>
</section>

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

CSS：.hidden{display:none}

Jquery的

$(document).ready(function(){
    $(".menu li a").mouseover(function(){
        $(".hidden").hide();
        $($(this).attr("href")).show();
    });
    /* Show the first div by default */
    $(".hidden:first").show();
});

这是一个小提琴：FIDDLE

仅当target指定了id时才显示元素

3 个答案: