Целевой псевдокласс не скрытый контент - PullRequest
Новая
       35

Целевой псевдокласс не скрытый контент

0 голосов
/ 29 января 2020

Я пытаюсь сделать горизонтальное меню: когда пользователь нажимает (или нажимает) на одну опцию, содержимое появляется под меню, на той же странице; когда пользователь нажимает другую опцию, новый контент перекрывает старый; содержимое каждого параметра является переменным - может быть коротким или длинным, с прокруткой или нет.

Я пытался сделать это, используя 'target' для тега 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>

Что я делаю не так?

Ответы [ 2 ]

1 голос
/ 29 января 2020

Похоже, вы можете просто добавить другое правило CSS для каждого типа тега, который хотите скрыть. Примерно так: 

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

Просто добавьте столько правил, сколько вам нужно. А еще лучше, вы можете обернуть все элементы в div и просто положить p, hr, et c. внутри этого. 

<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; }

Надеюсь, что поможет.

0 голосов
/ 29 января 2020

Ваш код не будет работать, потому что у вас не может быть тегов <hr> or <div> внутри абзаца, как у пунктов 2 и 3 соответственно. Проверьте: Помещение

Если вы удалите их, код будет работать так, как вы и предполагали.

Код ниже: 

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.
      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.
      <span>
        Item 3 paragraph 2 after a div class, but showed at the start; not hidden inside a p item.
      </span>
    </p>
  </div>

</body>
...