按下按钮时如何隐藏/显示内容？

时间：2019-03-21 04:12:33

标签： javascript html css html5 web

我正在设计一个网站，我想只在他们单击按钮时显示内容，而在他们再次单击时隐藏。 我能够找到解决方案，但必须为所有按钮编写不同的功能。我尝试了一些尝试，但未能成功。如果您能帮助我，我会很高兴。 ;）

我用display: none;隐藏了按钮，该按钮可以使用此功能：

function funcategory() {
  var a = document.getElementById("category");
  if (a.style.display === "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

我必须为所有按钮编写不同的功能。 有什么办法可以我全部使用吗？

我尝试过，但是没有用：

  function funcategory(x) {
  var a = document.getElementById(x);
  if (a.style.display === "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

这是单击按钮时必须显示的内容（再次单击时将其隐藏）：

<!--category------------------------------------------------->
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>

这是主按钮：

<button id="topbtn" onclick="funcategory()">Category</button

这是完整的代码：

<!DOCTYPE html>

<html>

<head>
<title>balalar</title>

<style>

body{
    background-color: #ff5993; }

#topbtn{
    background-color: #bf42f4;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#categorybtn{
    background-color: #ff7700;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#category{
    display: none;}

#contactus{
    background-color: #dddddd;
    font-size: 25px;
    display: none;}





</style>
<script>

function funcategory() {
  var a = document.getElementById("category");
  if (a.style.display === "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}
</script>

</head>


<body>

<h1 color="#0e0a0e"><center>BALALAR</center></h1>

<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>

<hr color="black" style="height: 3px; width: 1100px"/>

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>

<!--contact us----------------------------------------------->
<div id="contactus">
    <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
    <center>
</div>



</body>

</html>

5 个答案:

答案 0 :(得分：2)

首先id不能重复。您可以使用类作为替代。并使用document.querySelectorAll获取所有按钮。还要添加一个属性data-type，您可以为它命名，但必须以data-作为前缀，并且data-button的值将用于定位要隐藏/显示的部分。例如，检查该部分的data-type。之后，您可以使用classList.toggle来隐藏/删除类以切换可见性

document.querySelectorAll('.topbtn').forEach(function(item) {
  let getBtnData = item.dataset.button;
  item.addEventListener('click', function(e) {
    document.querySelector('[data-type="' + getBtnData + '"]').classList.toggle('visibility')
  })

})
body {
  background-color: #ff5993;
}

.topbtn {
  background-color: #bf42f4;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

#categorybtn {
  background-color: #ff7700;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

#category {
  display: none;
}

#contactus {
  background-color: #dddddd;
  font-size: 25px;
  display: none;
}

.visibility {
  display: block !important;
}
<h1 color="#0e0a0e">
  <center>BALALAR</center>
</h1>

<center>
  <button class="topbtn" data-button='contact'>Contact us</button>
  <button class="topbtn">Random</button>
  <button class="topbtn" data-button='category'>Category</button>
  <!--<button id="topbtn">All</button>
  <button id="topbtn">Mine</button>
  <button id="topbtn">Top</button>
  <button id="topbtn">Log in</button>-->
</center>

<hr color="black" style="height: 3px; width: 1100px" />

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="category" data-type='category'>
  <center>
    <button id="categorybtn">Actors</button>
    <button id="categorybtn">Singers</button>
    <button id="categorybtn">Instagram user</button>
    <button id="categorybtn">Model</button>
    <button id="categorybtn">Others</button>
    <button id="categorybtn">XXX</button>
  </center>
</div>

<!--contact us----------------------------------------------->
<div id="contactus" data-type='contact'>
  <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
    <center>
</div>

答案 1 :(得分：0)

1）不要使用相同的id来定义元素it must be unique in a document.。

2）您可以发送id：onclick="funcategory(this.id)"来区分要操作的那个。

3）可重用函数的示例：

var funcategory= function(e) {
  var a = document.getElementById(e+'content');
  if (a.style.display != "block") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

4）您忘记关闭center标签。现在已经过时了，或者您可以使用CSS text-align : center; 

body {
  background-color: #ff5993;
}

.topbtn {
  background-color: #bf42f4;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

.categorybtn {
  background-color: #ff7700;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

#categorycontent {
  display: none;
}

#contactcontent {
  background-color: #dddddd;
  font-size: 25px;
  display: none;
}
<script>
var funcategory= function(e) {
  var a = document.getElementById(e+'content');
  if (a.style.display != "block") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}
</script>

<h1 color="#0e0a0e">
  <center>BALALAR</center>
</h1>

<center>
  <button id="contact" class="topbtn" onclick="funcategory(this.id)">Contact us</button>
  <button id="random" class="topbtn">Random</button>
  <button id="category" onclick="funcategory(this.id)" class="topbtn">Category</button>
  <button id="all" class="topbtn">All</button>
  <button id="mine" class="topbtn">Mine</button>
  <button id="top" class="topbtn">Top</button>
  <button id="login" class="topbtn">Log in</button>
  <!-- do not  ^^^ use same id -->
</center>

<hr color="black" style="height: 3px; width: 1100px" />

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="categorycontent">
  <center>
    <button id="actor" class="categorybtn">Actors</button>
    <button id="singer" class="categorybtn">Singers</button>
    <button id="iguser" class="categorybtn">Instagram user</button>
    <button id="label" class="categorybtn">Model</button>
    <button id="other" class="categorybtn">Others</button>
    <button id="xxx" class="categorybtn">XXX</button>
    <!-- do not ^^^ use same id -->
  </center>
</div>

<!--contact us----------------------------------------------->
<div id="contactcontent">
  <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
  </center>
  <!-- << notice missing / >
</div>

答案 2 :(得分：0)

aria-live

答案 3 :(得分：0)

<!DOCTYPE html>

<html>

<head>
<title>balalar</title>

<style>

body{
    background-color: #ff5993; }

#topbtn{
    background-color: #bf42f4;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#categorybtn{
    background-color: #ff7700;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#category{
    display: none;}

#contactus{
    background-color: #dddddd;
    font-size: 25px;
    display: none;}





</style>
<script>

function funcategory() {
  var a = document.getElementById("category");
  if (a.style.display === "") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}
</script>

</head>


<body>

<h1 color="#0e0a0e"><center>BALALAR</center></h1>

<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>

<hr color="black" style="height: 3px; width: 1100px"/>

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>

<!--contact us----------------------------------------------->
<div id="contactus">
    <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
    <center>
</div>



</body>

</html>

您要在单击“类别”按钮时显示内容，而要在再次单击“类别”按钮时隐藏内容。那是你要的吗 ？

如果是这样，而不是检查

  

如果（a.style.display ===“ none”）

您可以检查为

  

如果（a.style.display ===“”）

答案 4 :(得分：0)

如果您想完全避免使用javascript，可以通过一个复选框和一些漂亮的CSS来做到这一点。

在这里，我们将label标签与关联的复选框一起使用。单击标签可切换复选框的状态。然后，我们可以将:checked伪类与~一起使用，将Adjacent sibling selector切换为display:none; 

/*This is the magic - Hide the div next to a checkbox that is checked. 
It will show when unchecked courtesy of the associated label */
.toggler:checked + div {
  display:none;
}

/*HIde our toggling checkboxes*/
.toggler {display:none;}


body {
  background-color: #ff5993;
}

.centered {
text-align:center;
}

.topbtn {
  background-color: #bf42f4;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

.categorybtn {
  background-color: #ff7700;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}




#contactus {
  background-color: #dddddd;
  font-size: 25px;
}
<h1 color="#0e0a0e">
  <center>BALALAR</center>
</h1>

<div class="centered">
  <label class="topbtn" for="cb-contact">Contact us</label>
  <label class="topbtn">Random</label>
  <label class="topbtn" for="cb-category">Category</label>  
</div>

<hr color="black" style="height: 3px; width: 1100px" />

<!--invisible----------------------------------------------->

<!--category------------------------------------------------> 
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-category" class="toggler" checked />
<div id="category" data-type='category' class="centered">
    <button class="categorybtn">Actors</button>
    <button class="categorybtn">Singers</button>
    <button class="categorybtn">Instagram user</button>
    <button class="categorybtn">Model</button>
    <button class="categorybtn">Others</button>
    <button class="categorybtn">XXX</button>
</div>

<!--contact us----------------------------------------------->
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-contact" class="toggler" checked />
<div id="contactus" data-type='contact' class="centered">
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
</div>

您还应该注意center tag is obsolete，并且不应再使用它。改用CSS。正如其他所有人所提到的那样，页面上的ID 必须唯一，请使用类。

相关问题
最新问题