点击SVG切换多个textarea的display属性 实现block到none的显隐控制

前置修正：现有代码问题 #

• HTML中id属性是全局唯一的，你当前给多个img、textarea设置了相同的id，会导致元素选择异常，需要先修改为唯一值或者直接去掉重复id。

方案1：纯CSS实现（无需JavaScript，适配你当前的学习进度） #

利用单选框的checked状态伪类实现交互，完全不需要写JS代码，完整示例如下：

<!-- 隐藏的单选框，用来记录选中状态 -->
<input type="radio" name="textareaTab" id="tab1" hidden checked>
<input type="radio" name="textareaTab" id="tab2" hidden>
<input type="radio" name="textareaTab" id="tab3" hidden>

<div>
  <!-- 用label包裹img，点击img等价于点击对应单选框 -->
  <label for="tab1">
    <img src="/1.svg" alt="Open Menu" class="menu">
  </label>
  <label for="tab2">
    <img src="/2.svg" alt="Open Menu" class="menu">
  </label>
  <label for="tab3">
    <img src="/3.svg" alt="Open Menu" class="menu">
  </label>
</div>

<style>
/* 默认所有textarea隐藏 */
textarea {
  display: none;
}
/* 选中第一个单选框时，显示class为one的textarea */
#tab1:checked ~ .textniz .one {
  display: block;
}
/* 选中第二个单选框时，显示class为two的textarea */
#tab2:checked ~ .textniz .two {
  display: block;
}
/* 选中第三个单选框时，显示class为three的textarea */
#tab3:checked ~ .textniz .three {
  display: block;
}
</style>

<div class="textniz">
  <textarea class="one" name="myInput1" readonly>
Line one
Line two
Line three</textarea>
</div>

<div class="textniz">
  <textarea class="two" name="myInput2" readonly>
Line four
Line five
Line six</textarea>
</div>

<div class="textniz">
  <textarea class="three" name="myInput3" readonly>
Line seven
Line eight
Line nine</textarea>
</div>

方案2：极简JavaScript实现（逻辑简单易上手） #

如果愿意花5分钟了解基础JS语法，这个方案扩展性更强，完整示例如下：

<div>
  <!-- 给每个img加data-target属性，绑定对应的textarea类名 -->
  <img src="/1.svg" alt="Open Menu" class="menu" data-target="one">
  <img src="/2.svg" alt="Open Menu" class="menu" data-target="two">
  <img src="/3.svg" alt="Open Menu" class="menu" data-target="three">
</div>

<div class="textniz">
  <textarea class="one" name="myInput1" readonly>
Line one
Line two
Line three</textarea>
</div>

<div class="textniz">
  <textarea class="two" name="myInput2" readonly>
Line four
Line five
Line six</textarea>
</div>

<div class="textniz">
  <textarea class="three" name="myInput3" readonly>
Line seven
Line eight
Line nine</textarea>
</div>

<script>
// 给每个svg图片绑定点击事件
document.querySelectorAll('.menu').forEach(img => {
  img.addEventListener('click', function() {
    // 第一步：隐藏所有textarea
    document.querySelectorAll('textarea').forEach(textarea => {
      textarea.style.display = 'none'
    })
    // 第二步：获取当前点击的svg对应的textarea类名，把它显示出来
    const targetClass = this.dataset.target
    document.querySelector(`.${targetClass}`).style.display = 'block'
  })
})
</script>

学习指引 #

• 选方案1的话，可以重点复习CSS的伪类选择器、兄弟选择器、HTML的label标签属性相关知识点，就能完全搞懂实现逻辑
• 选方案2的话，只需要了解JS的基础DOM操作：元素查询、事件绑定、自定义属性读取、样式修改这几个点，都是JS入门级的知识点，学习成本很低。

内容的提问来源于stack exchange，提问作者Edvard