我们是否可以在一个 div 中显示/隐藏不同的内容，而无需使用 Select 方法，而只需单击鼠标即可？

Question

是否可以在一个 div 中显示/隐藏不同的内容，而无需使用 Select 方法，而只需在 div 上单击鼠标即可？

例如：

.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>

如果我点击“Option 1”div，它会显示“Content 1”中的所有内容

选项1 -> 内容1

可能吗？

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

sssccc
 Option 1 
 Option 2 
 Option 3 

Content 1
Content 2
Content 3