css 如何隐藏/显示元素

我有多个div，我方便地将其标识为“start”，“a”，“B”，“c”等。在页面加载时，我希望只将div标识显示为“start”。在按下按钮时，我希望只将div标识显示为“a”，并重复地继续执行字母表中的所有字母。以下是我目前为止拥有的代码。

<div id="start">
  Lets Begin<br />
  <button id="startbutton">Start</button>
</div>

<div id="a">
  <img onclick="play('sounds/apple.mp3')" 
       src="images/apple.png" width="400" height="400" />
  <br />
  <button onclick="play('sounds/correct1.mp3')" 
          class="multiple-choice">
    Apple
  </button>
  <button onclick="play('sounds/wrong1.mp3')" 
          class="multiple-choice">
    Slinky
  </button>
  <button onclick="play('sounds/wrong1.mp3')" 
          class="multiple-choice">
    Orange
  </button>
</div>

<div id="b">
  <img onclick="" src="images/banana.png" 
       width="400" height="400" />
  <br />
  <button onclick="" class="multiple-choice">Monkey</button>
  <button onclick="" class="multiple-choice">Banana</button>
  <button onclick="" class="multiple-choice">Yellow</button>
</div>

我知道我应该使用addeventlistners而不是onclicks，但是现在让我们使用onclicks。
我对javascript很陌生，但是有很多php经验。所以我想用display：none，display：block样式来切换。但是我就是不能把它们放在一起。

这可能是相当容易做到的，所以我会尝试有一个快速和简单的解决方案，把事情做好。
正如上面的注解中所建议的，准备一个CSS类是个好主意，让我们将其命名为.hidden，它只需将display属性设置为none，这意味着一旦应用于元素，它就会隐藏它。
所以这个想法很简单，我们有一些div，其中每个都包含一个button，shows又包含一个基于ID的div。

如上所述准备.hidden类。
我们将有一些div，它们可以根据button的单击次数显示或隐藏。
我们将为这些div指定一个类，例如，我们将其命名为.toggleable，这将使我们更容易在后面的JS部分中选择这些div。
这些div默认应用.hidden类，因此在初始页面加载时隐藏。我们只保留div#start不变，因此在页面加载时显示。
如上所述，每个div都有一个button，它显示了另一个基于ID的div。为了在JS部分轻松获取这些button，我们将给予每个button指定一个类，我们将其命名为.toggler。
每个button还将有一个data-*属性，例如，让我们将其命名为data-show，它将保存要显示的div的ID（类似于data-show="a"）。
现在我们已经有了合适的结构，我们可以继续进行实现了。在JS部分，我们将选择并缓存所有的div和button，以便我们可以轻松地使用它们。
我们将遍历button，并对每个处理.togleablediv显示/隐藏的click事件侦听器应用一个click事件侦听器。
click处理程序将找到当前显示的.toggleablediv，并使用.hidden类隐藏它。
最后，处理程序将通过从请求的.togleablex 1 m50n1x中删除.hidden类，基于单击的button的data-show属性显示请求的.togleablex 1 m45n1x.

现在，这里有一个现场演示，您可以按照自己认为适合的方式进行操作：

/** select all the DIVs and buttons */
const togglers = document.querySelectorAll('.toggler'),
  /** quickly transform the result set retuned by "querySelectorAll" into an array so we can use the built-in array methods like "forEach" and "find" */
  togglebales = [...document.querySelectorAll('.toggleable')],
  /** "show" is our click event handler. It handles showing a DIV based on the ID found in the clicked button's "data-show" attribute. If you use an arrow function it won't work!! */
  show = function() {
    /** finds the currently shown DIV and hides it using the ".hhidden" class */
    togglebales.find(el => !el.classList.contains('hidden')).classList.add('hidden');
    /** finds the DIV to show by the ID in the button's "data-show" attribute (by simply removing the ".hidden" class from that DIV */
    togglebales.find(el => el.id === this.dataset.show).classList.remove('hidden');
  }

/** apply the click handler, "show", to the buttons */
togglers.forEach(btn => btn.addEventListener('click', show))

/** hides an elemnt, simply. */
.hidden {
  display: none;
}

<!-- The ".hidden" class is given to all ".togleable" DIVs except the one with ID of "start" so that one is shown on page load -->

<!-- Each button has a "data-show" atytribute that contains the ID of the DIV to show -->

<div class="toggleable" id="start">
  <p>Start DIV</p>
  <button class="toggler" data-show="a">Show DIV#a</button>
</div>
<div id="a" class="toggleable hidden">
  <p>DIV#a</p>
  <button class="toggler" data-show="b">Show DIV#b</button>
</div>
<div id="b" class="toggleable hidden">
  <p>DIV#b</p>
  <button class="toggler" data-show="c">Show DIV#c</button>
</div>
<div id="c" class="toggleable hidden">
  <p>DIV#c</p>
  <button class="toggler" data-show="start">Show DIV#start</button>
</div>

上述解决方案只是完成工作的一种方法，它不是完成工作的唯一方法或最佳方法。可以找到许多其他替代解决方案，如使用事件委托来减少对addEventListener方法的调用。
最后，这里有一些有用的链接，指向上面代码片段中使用的一些方法/技术的文档：addEventListener、querySelector、querySelectorAll、classList methods、data attributes、destructuring assignment、array methods

css 如何隐藏/显示元素

1条答案

相关问题

热门标签

最新问答