如何将href定位到多个div？答案

【问题标题】：how to target href to multiple divs?如何将href定位到多个div？
【发布时间】：2014-09-20 21:57:50
【问题描述】：

我使用了How to target the href to div中显示的方法将href定位到div。有效。但我需要添加另一个级别。

HTML

<ul >
    <li class="active"><a href="#m1">home</a></li>
    <li><a href="#m2">settings</a></li>
</ul>

<div class="target">
    <div id="m1">
        <ul >
            <li class="active"><a href="#subm1-1" title="Home1">Item1</a></li>
            <li><a href="#subm1-2">Item 2</a></li>
        </ul>
    </div>

    <div id="m2">
        <ul>
            <li class="active"><a href="#subm2-1" title="Home1">Item1</a></li>
            <li><a href="#subm2-2">Item 2</a></li>
        </ul>
    </div>
</div>

<div class="target123">
    <div id="subm1-1">
        content1
    </div>
    <div id="subm1-2">
        content2
    </div>
    <div id="subm2-1">
        content3
    </div>
    <div id="subm2-2">
        content4
    </div>
</div>

CSS

.target > div {
    display:none;
}

.target > div:target{
    display:block;
}


.target123 > div {
    display:none;
}

.target123 > div:target{
    display:block;
}

我的问题是当我单击链接时，内容中的“项目 1”出现在正确的位置。但是里面的内容消失了。

我怎样才能阻止这种情况？

我的 div 彼此相邻。所以一个 div 不会与另一个重叠。

【问题讨论】：

我不明白你的css中的 :target 应该是什么意思，你可能是指 .active 吗？
这需要脚本（javascript/jquery）。或者，您可以制作多个页面，每个元素一个页面，因为它首先被选中。然后，当他们选择第二个元素时，显示/隐藏其他元素。不过会很痛苦。

标签： html css pseudo-class fragment-identifier

【解决方案1】：

如果我正确理解您要执行的操作，则使用 :target 属性是不可能的。目标始终是 URL 中 # 之后的部分，一次只能有一个目标。

这意味着每当您激活一个目标时，所有其他元素都将再次被隐藏。使用此方法不能同时显示基于两个不同目标的内容。

【讨论】：