目标伪类未隐藏的内容

问题描述 投票:0回答:1

我正在尝试做一个水平菜单:当用户单击(或点击)一个选项时,内容将显示在菜单下方的同一页上;当用户单击另一个选项时,新内容与旧内容重叠;每个选项上的内容都是可变的-可以很短也可以很长,可以滚动也可以不滚动。

根据此链接,我尝试在标签p上使用'target'使其成为目标: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>

我做错了什么?

html css pseudo-class
1个回答
0
投票
div.items hr:not(:target), div.items p:not(:target) {display: none} div.items hr:target, div.items p:target { display: block; }

只需添加所需数量的规则。更好的是,您可以将所有项目包装在div中,然后将phr等放入其中。然后执行此操作:

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

希望有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.