javascript - 请帮助仅使用 html 和 css 如何显示隐藏导航栏按钮中的任何一个 div

Question

我有两个divs。一个显示配置wifi，另一个显示状态。发生的事情是，当我单击导航栏按钮时，它会显示 Wific 配置 div，如果我再次单击它，它会隐藏它。如果我单击第二个按钮显示状态 div，它会显示状态以及配置 wifi div。然后我必须单击其中一个按钮来查看我不想看到的内容。

我只想使用我尝试过的css和html来实现的是在导航栏中单击相应按钮时在div之间切换。

.toggle-content {
  display: none;
}

.toggle-content.is-visible {
  display: block;
}

html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  font-size: 1.0rem;
  text-align: center;
  padding: 14px 26px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.center {
  margin: auto;
  border-style: groove;
  padding: 10px;
}

h2 {
  font-size: 1.0rem;
}

p,
{
  font-size: 3.0rem;
}

.units {
  font-size: 1.2rem;
}

</style>

<ul>
  <li><a class="toggle active" href="#wifisetup">Configure Wifi</a></li>
  <li><a class="toggle" href="#PotsStatus">Show Status</a></li>
</ul>

<div class="toggle-content" id="wifisetup" style="display:visible; font-size:18px;">
  <h2>Connect to a Wifi Network!</h2>
  <label for="wifi">Choose ssid:</label>
  <select name="wifi" id="ssid">
  </select><br>
  <label for="wifi" id="pass_lbl">Enter password:</label>
  <input type="password" id="pass"></input>
  <br><br>
  <input type="button" value="Rescan">
  <button id="button_save" class="button_wifi" onclick="update()">Connect</button>
</div>
<br>
<div id="PotsStatus" class="toggle-content" style="font-size:14px;">
</div>

我希望能够在两者之间切换，而divs不是通过两次单击相同的按钮来关闭，navbar即使它存在也可以，但是当我选择显示状态时，配置 wifi div 应该隐藏。

标签： javascripthtmlcss