Question

我设置了一些名为#a1，#a2 ... #a100

的div

我需要隐藏并根据链接显示div。问题是始终显示原始div（#a1）。

有点工作，小提琴here

代码：

 #a1 {
    display:block;
}
div:not(:target) {
    display: none
}
div(:target) {
    display: block
}

如何在选择另一个div之后摆脱它？

没有JavaScript是可能的，因为它是电子书阅读器，它不执行JS。

Answer 1

此解决方案并不完美，但它确实允许您默认显示第一个div。它的工作原理是始终显示第一个div，并仅在选中时显示第一个div之上的其他div。根据您的内容的动态程度，如果您无法明确定义位置或大小，这可能会导致边缘出现问题。

jsFiddle

＆＃13;

div(:target) {
    display:block;
}

div:not(:target) {
    display:none;
}

div {
    position: absolute; /* so that the divs will be layered */
    top:40px; /* they all need to be in the same place */
    left: 10px;
    background-color: #fff; /* they need some sort of background */
    height: 100px;
}

#a1 {
    display: block !important; /* make the first one always visible */
}

＆＃13;

<a href="#a1">Section 1</a> | <a href="#a2">Section 2</a> | <a href="#a3">Section 3</a>

<div id="a1">
    <h3>Section 1</h3>
    <p>Lorem ipsum dolor set amet.</p>
</div>

<div id="a2">
    <h3>Section 2</h3>
    <p>This has more text.</p>
</div>

<div id="a3">
    <h3>Section 3</h3>
    <p>This is a paragraph.</p>
</div>

＆＃13;

Answer 2

这对你有帮助吗？ https://jsfiddle.net/1ethjztf/12/

<a name="1" href="#a1">1</a> 
<a name="2" href="#a2">2</a> 
<a name="3" href="#a3">3</a> 
<a name="4" href="#a4">4</a> 

<div id="a1" class="hide-not-target">
    <h1>1</h1>
    <p>1st content<br/>
    with some more stuff<br/>
    and some more stuff</p>
</div>

<div id="a2" class="hide-not-target">
    <h1>2</h1>
    <p>2nd</p>
</div>

<div id="a3" class="hide-not-target">
    <h1>3</h1>
    <p>3rd</p>
</div>

<div id="a4" class="hide-not-target">
    <h1>4</h1>
    <p>4th content</p>
</div>

仅限css，仅显示div第一次访问页面

2 个答案: