0

我想默认隐藏内容 2，当我单击导航栏按钮时，内容 2 会显示并隐藏内容 1

如果再次单击该按钮，则隐藏内容 2 并显示内容 1

<!DOCTYPE html>

<head>
  <style>
    #sidebarnav {
      display: none;
    }
    
    #sidebarnav:not(:checked)~.sidebar-button {
      display: block;
    }
    
    #sidebarnav:checked~.sidebar-button {
      display: none;
    }
  </style>
</head>

<body>

  <div class="sidebarnav">
    <button class="sidebar-button" type="button">navbar button</button>
    <div>Content 1</div>
    <div class="sidebarnav"> Content 2</div>
  </div>

</body>

</html>

4

1 回答 1

0

您可以使用隐藏的复选框方法。注释中解释的代码。

#navbar-button:checked~.content-1 { /* Hide Content 1 when checked */
  display: none;
}

#navbar-button:not(:checked)~.content-2 { /* Hide Content 2 by default or show when not checked */
  display: none;
}

#navbar-button { /* Hide the checkbox */
  display: none;
}

#navbar-label { /* Style the default label to look like a button */
  display: inline-block;
  margin: 12px 0;
  padding: 5px 11px;
  background-color: lightgrey;
  color: black;
  border: 1px solid;
  border-radius: 3px;
 }
<div class="sidebarnav">
  <input id="navbar-button" type="checkbox">
  <label for="navbar-button" id="navbar-label">Navbar button</label>
  <div class="content-1">Content 1</div>
  <div class="content-2"> Content 2</div>
</div>

于 2020-10-25T21:21:31.250 回答