javascript 显示隐藏div的锚标记和隐藏锚标记本身

b1payxdu 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(103)

我需要一个锚标记链接到一个隐藏的div，隐藏了除div本身的页面内容的其余部分，我知道如何做到这一点，但我不知道如何隐藏也锚标记。另外，如果用JavaScript而不是jQuery来做会更好。
HTML

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c""> this is c id</div>

CSS

#a, #b, #c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}

我找到了一个部分解决我的问题，它基本上显示隐藏的div，但我需要它也隐藏3个锚标记，我怎么能做到这一点？链接到js fiddle https://jsfiddle.net/szotev9k/

JavaScript

来源：https://stackoverflow.com/questions/77255232/anchor-tag-showing-hidden-div-and-hide-anchor-tag-itself

1条答案

按热度按时间

t40tm48m1#

这可以通过纯CSS来实现，如果你构造HTML来启用它的话--它需要稍微调整一下，使用一个稍微高级一点的兄弟选择器。
https://jsfiddle.net/d15Lahkz/1/

<div id="a" class="page"> <a href="#a">a</a> <div class="content">this is a id</div></div>
<div id="b" class="page"> <a href="#b">b</a> <div class="content">this is b id</div></div>
<div id="c" class="page"> <a href="#c">c</a> <div class="content">this is c id</div></div>

和

.page {
  display: inline-block;
 }
.content {
  display: none;
 }

.page:target ~ :not(.page:target) {
  display: none;
}

.page:target a{
    display: none;
}
.page:target > .content{
    display:block;
}

赞(0）回复(0）举报 2023-10-14

我来回答

javascript 显示隐藏div的锚标记和隐藏锚标记本身

1条答案

相关问题

热门标签

最新问答