javascript 我们可以在一个div中显示/隐藏不同的内容，而不使用Select方法，而是通过简单的鼠标点击？

y1aodyip 于 2022-12-17 发布在 Java

关注(0)|答案(1)|浏览(118)

是否可以不使用Select方法而仅通过简单的鼠标单击div来显示/隐藏一个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>

如果我单击“选项1”div，它会显示“内容1”中的所有内容

选项1 -〉内容1

有可能吗？

JavaScript

来源：https://stackoverflow.com/questions/74826455/can-we-show-hide-different-content-in-one-div-without-using-select-method-instea

1条答案

按热度按时间

pprl5pva1#

若要 * 完全不使用JavaScript* 执行此操作，您可以使用带标签的复选框，但必须修改标记：

.inv {
  display: none;
}

label{
  display: block;
}

input {
  display: none;
}

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

<label for="one"> Option 1 </label>
<label for="two"> Option 2 </label>
<label for="three"> Option 3 </label>

<input type="checkbox" id="one">
<div class="inv">Content 1</div>
<input type="checkbox" id="two">
<div class="inv">Content 2</div>
<input type="checkbox" id="three">
<div class="inv">Content 3</div>

如果你不想过多地修改当前的标记，你必须使用JS。下面的例子使用data attributes来标识要切换的元素。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2022-12-17

我来回答

javascript 我们可以在一个div中显示/隐藏不同的内容，而不使用Select方法，而是通过简单的鼠标点击？

1条答案

相关问题

热门标签

最新问答