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

问题描述 投票：1回答：5

我正在设计一个网站，我想在他们点击按钮时显示内容，并在他们再次点击时隐藏。我能够找到解决方案，但我必须为所有按钮编写不同的功能。我试了几件但是做不到。如果你帮助我，我会很高兴的。 ;）

我通过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>
javascript html css html5 web
5个回答
2
投票

首先，id不能重复。您可以使用class作为替代方案。并使用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>
0
投票
 function funcategory(elem) {
  if (elem.style.display === "none") {
    elem.style.display = "block";
  } else {
    elem.style.display = "none";
  }
}

<div id="category">
<center>
<button id="categorybtn" onclick="funcategory(this)">Actors</button>
<button id="categorybtn" onclick="funcategory(this)">Singers</button>
<button id="categorybtn" onclick="funcategory(this)">Instagram user</button>
<button id="categorybtn" onclick="funcategory(this)">Model</button>
<button id="categorybtn" onclick="funcategory(this)">Others</button>
<button id="categorybtn" onclick="funcategory(this)">XXX</button>
</center>
</div>
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>

您希望在单击“类别”按钮时显示内容，并且如果再次单击“类别”按钮，则要隐藏内容。那是你要的吗 ？

如果是这样而不是检查

if（a.style.display ===“none”）

你可以检查一下

if（a.style.display ===“”）

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必须在页面上是唯一的，而是使用类。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.