Können wir verschiedene Inhalte in einem Div ein-/ausblenden, ohne die Select-Methode zu verwenden, sondern nur mit einem Mausklick?

Question

Ist es möglich, verschiedene Inhalte in einem Div anzuzeigen/auszublenden, ohne die Select-Methode zu verwenden, sondern einfach mit einem Mausklick auf das Div?

Zum Beispiel:

.inv{
  display: none;
}

<div class="inv">
 
  <div> Option 1 </div>
  <div> Option 2 </div>
  <div> Option 3 </div>
 
  <div class="inv">Content 1</div>
  <div class="inv">Content 2</div>
  <div class="inv">Content 3</div>

</div>

Wenn ich auf das Div „Option 1“ klicke, wird alles in „Inhalt 1“ angezeigt

Option 1 -> Inhalt 1

Ist es möglich?

Answer 1

要严格不使用 JavaScript 来完成此操作，您可以使用带有标签的复选框，但您必须修改标记：

.inv {
  display: none;
}

label{
  display: block;
}

input {
  display: none;
}

input:checked + .inv{
  display: block !important;
}

 Option 1 
 Option 2 
 Option 3 


Content 1

Content 2

Content 3

如果你不想对当前标记进行太多更改，则必须使用 JS。以下示例使用数据属性来标识元素切换。

$('div[data-for]').click(function() {
  $(`.inv[data-id="${this.dataset.for}"]`).toggle()
})

.inv {
  display: none;
}

 Option 1 
 Option 2 
 Option 3 

Content 1
Content 2
Content 3