将多个文本区域的显示从块更改为无

Question

我目前正试图弄清楚如何让一个文本区域消失而另一个文本区域会出现。

我对 javascript 一无所知，我刚刚开始学习 HTML 和 CSS 的基础知识，论坛中的任何人都可以帮助我，或者引导我走向正确的道路。

为了更清楚，我附上部分代码。

当你点击“2.svg”时，它应该改变“textarea.one's and three's”“display:block;”进入“显示：无；”

当你点击“3.svg”时，它应该改变“textarea.two's and one's”“display:block;”进入“显示：无；”

当你点击“1.svg”时，它应该改变“textarea.two's and three's”“display:block;”进入“显示：无；”

我希望这个解释足够清楚，我也不确定是否允许我在这个论坛上要求提供完整的代码而不自己准备任何东西。

提前感谢阅读本文的人！

<div>
      <img id="header1" src="/1.svg" alt="Open Menu" class="menu">
      <img id="header1" src="/2.svg" alt="Open Menu" class="menu">
      <img id="header1" src="/3.svg" alt="Open Menu" class="menu">
</div>

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

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

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

Answer 1

阅读：https://www.w3schools.com/jsref/prop_style_display.asp

为了改变一个元素的显示属性，你可以这样访问它：

document.querySelector("myelement").style.display = "theValueIWant";

注意不同的selectors

现在，您想要的是当我们单击 2.svg 以将 textarea 1 和 3 的显示属性从块更改为无。首先使用document.querySelector("textarea.one") 选择这些，然后更改值：document.querySelector("textarea.one").style.display = "none"; 现在，要调用这个 javascript，您需要一个事件。您可以使用 onClick 之一。简单的

 <img id="header1" onClick="document.querySelector('textarea.one').style.display = 'none';" src="/1.svg" alt="Open Menu" class="menu">

点击时会改变 textarea.one 元素的显示属性。

方法一 为了调用多个元素，我建议在要隐藏的两个元素上再添加一个类，然后只需使用上面的代码更改类即可。例如，到textarea 一个和三个add class hideOne 然后用document.querySelector("hideOne").style.display = "none"; 隐藏元素

方法 II 另一种实现此目的的方法是创建一个隐藏两个组件的函数。创建一个脚本标签，然后使用上面的选择器隐藏这两个元素：

<script>
function hide1(){
document.querySelector('textarea.one').style.display = "none"
document.querySelector('textarea.three').style.display = "none"
}
</script>

然后通过插入要点击的元素（你的svg）来调用函数：onClick="hide1()"

就是这样！

Answer 2

以下是在不使用 jQuery 的情况下实现相同目标的一种非常简单的方法。

它不像基于 jQuery 的解决方案那样容易阅读，但包含某些您可能也会感兴趣的元素：

1. 我使用了“委托事件附件”，这意味着我将 click 事件处理程序附加到三个 <img> 元素的父元素（文档中的第一个 div）。这样做可以使文档保持“快速”，并使其易于被更多元素扩展。
2. 我通过它的id属性来识别点击的图像：只有当点击的元素有tagName==="DIV"并且它的id以“header”开头时，我才会取剩下的（id-string - 1）作为在cls数组中查找类名c的索引。
3. 在txtas.forEach() 循环中，然后我将在其classList 中显示包含c 的<textarea>，而所有其他的都将被隐藏。

const cls=["one","two","three"],
      txtas=document.getElementsByName("myInput");
document.querySelector("div").onclick=ev=>{ let el=ev.target;
  if(el.tagName==="IMG"&&el.id.substr(0,6)==="header"){
    let c=cls[el.id.substr(6)-1];
    txtas.forEach(t=>t.style.display=t.classList.contains(c)?"":"none");
  }
}

<div>
      <img id="header1" src="/1.svg" alt="first" class="menu">
      <img id="header2" src="/2.svg" alt="second" class="menu">
      <img id="header3" src="/3.svg" alt="third" class="menu">
</div>

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

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

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

我从您的 <textarea> 元素中删除了 id 属性，因为它们会被欺骗。没有它们，脚本运行良好。

Answer 3

仅使用CSS 是不可能的，但使用JQuery 就很容易（我认为你会更容易开始，因为语义对于初学者来说比纯粹的javascript 更易于阅读）

像这样：

$("#header1").click(function(){
  $(".two").hide();
  $(".three").hide();
  $(".one").show();
});
$("#header2").click(function(){
  $(".one").hide();
  $(".three").hide();
  $(".two").show();
});
$("#header3").click(function(){
  $(".one").hide();
  $(".two").hide();
  $(".three").show();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
      <img id="header1" src="/1.svg" alt="Open Menu" class="menu">
      <img id="header2" src="/2.svg" alt="Open Menu" class="menu">
      <img id="header3" src="/3.svg" alt="Open Menu" class="menu">
</div>

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

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

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

Answer 4

所以根据你的问题，如果它只是一个快速切换并且你只希望一个视图处于活动状态，那么使用 jQuery 会更好更容易，因为它非常直接，@Alvaro 已经分享了快速代码 sn-p .使用 jQuery 非常容易。

免责声明：它让您的生活变得如此轻松，如果您尝试学习一个完整的经验丰富的框架，那么将有很长的解决方法。但是开始使用 jQuery。你会发现它非常互动。

快乐编码:)