javascript - 如果没有点击链接,则显示所有 div
问题描述
我有一个页面名称 url.com/yourfirstpage/ 当我转到该页面时,如果我们将#sec1 定位为 url.com/yourfirstpage/#sec1,所有 div 默认隐藏(显示:none),它只显示 sec1 并隐藏其他. 我想知道我们是否在没有像 url.com/yourfirstpage/ 这样的锚 id 的情况下访问 url,它需要显示所有 div。
#sec1, #sec2, #sec3{
display:none;
}
#sec1:target{
display:block;
}
#sec2:target{
display:block;
}
#sec3:target{
display:block;
}
<a href="#sec1">sec1</a>
<a href="#sec2">sec2</a>
<a href="#sec3">sec3</a>
<div id="sec1" class="page"> this is sec1</div>
<div id="sec2" class="page"> this is sec2</div>
<div id="sec3" class="page"> this is sec3</div>
解决方案
这是一个技巧,以防您能够修改 HTML 结构。这个想法是让元素可见,然后我们使用隐藏它们:target
。由于我们没有先前的兄弟选择器或父选择器,我在父元素中使用 id 来选择任何元素:
#sec1:target .page:nth-child(n+2){
display: none;
}
#sec2:target .page:nth-child(2n+1){
display: none;
}
#sec3:target .page:nth-last-child(n+2){
display: none;
}
<a href="#sec1">sec1</a>
<a href="#sec2">sec2</a>
<a href="#sec3">sec3</a>
<div id="sec1">
<div id="sec2">
<div id="sec3">
<div class="page"> this is sec1</div>
<div class="page"> this is sec2</div>
<div class="page"> this is sec3</div>
</div>
</div>
</div>
它可以与任意数量的部分一起使用,我们可以改进 CSS 代码如下:
#sec1:target .page:not(:nth-child(1)),
#sec2:target .page:not(:nth-child(2)),
#sec3:target .page:not(:nth-child(3)),
#sec4:target .page:not(:nth-child(4)),
#sec5:target .page:not(:nth-child(5)) {
display: none;
}
<a href="#sec1">sec1</a>
<a href="#sec2">sec2</a>
<a href="#sec3">sec3</a>
<a href="#sec4">sec4</a>
<a href="#sec5">sec5</a>
<div id="sec1">
<div id="sec2">
<div id="sec3">
<div id="sec4">
<div id="sec5">
<div class="page"> this is sec1</div>
<div class="page"> this is sec2</div>
<div class="page"> this is sec3</div>
<div class="page"> this is sec4</div>
<div class="page"> this is sec5</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- reactjs - Mobx-state-tree 在树内使用 mobx 反应 - 好习惯还是坏习惯?
- python - 用函数结束“If 语句”
- python-3.x - Python 3:将函数参数解析为字符串
- asp.net - bonobo git 服务器 aspxerrorpath
- angular - 订阅返回 observable-Angular 单元测试中的测试错误块
- angular - 发送包含在表单中的表中的表行中的所有字段 - Angular
- excel - 如何使用 vba 导航到已打开的 IE 窗口?
- php - Symfony 查询生成器
- python-3.x - 试图从给定的一系列输入中返回第二低等级的持有者
- javascript - 如何操纵每个滚动运动的值?