时间戳

首页 > 解决方案 > 目标伪类不隐藏内容

html - 目标伪类不隐藏内容

问题描述

我正在尝试做一个水平菜单：当用户单击（或点击）一个选项时，内容出现在菜单下方，在同一页面上；当用户点击另一个选项时，新内容与旧内容重叠；每个选项的内容是可变的 - 可以短或长，是否滚动。

我尝试在标签 p 上使用“目标”，基于此链接：https ://www.w3.org/Style/Examples/007/target.en.html

但是当我使用 hr 或 div 或其他不仅是文本的标签时，此内容会出现并且在 p 标签内无法识别，应该隐藏在哪里。

body {
  margin:0;		 
  font-family: Calibri, Helvetica, Arial, sans-serif;
}

div.items p:not(:target) {display: none}
div.items p:target {  display: block; }
<body>
	<p class="menu">  
		<a href="#item1" class="menuLink">Item 1</a>
		<a href="#item2">Item 2</a>
		<a href="#item3">Item 3</a>
	</p>
	
	<div class="items">
		<p id="item1">
			11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.  	
			<br><br>
			Item 1 paragraph 2 after a break line, but appears the content after tag hr or tag div from others items.
		</p>
		
		<p id="item2">
			22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.  	
			<hr>
			Item 2 paragraph 2 after an hr tag, but showed at the start; not hidden inside a p item.
		</p>
		
		<p id="item3">
			33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.  	
			<div>
				Item 3 paragraph 2 after a div class, but showed at the start; not hidden inside a p item.
			</div>
		</p>
	</div>
	
</body>

我做错了什么？

标签： htmlcsspseudo-class

解决方案

看起来您可以为要隐藏的每种类型的标签添加另一个 CSS 规则。像这样的东西：

div.items hr:not(:target), div.items p:not(:target) {display: none}
div.items hr:target, div.items p:target { display: block; }

只需根据需要添加尽可能多的规则。更好的是，您可以将所有项目包装在 a 中div，然后将p,hr等放入其中。

<div class="items">
  <div id="item1">
    <p>Some text</p>
    <hr />
    <p>Something else</p>
  </div>
  <div id="item2">
     ...
  </div>
  ...
</div>

然后这样做：

div.items > div:not(:target) {display: none}
div.items > div:target { display: block; }

希望有帮助。

推荐阅读