堆栈内存溢出
  繁体   English   中英

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

[英]how to hide/show content when button pressed?

 原文  2019-03-21 04:12:33  5   5    javascript/ html/ css/ html5/ web

问题描述

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

我通过display: none;隐藏按钮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 个解决方案

解决方案1
 2  2019-03-21 04:28:56

首先， 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>

解决方案2
 0  2019-03-21 04:29:52

1）不要使用相同的id来定义元素， 它在文档中必须是唯一的。 。

2）您可以发送id ： onclick="funcategory(this.id)"来区分您要操作的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>

解决方案3
 0  2019-03-21 04:32:29

 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>

解决方案4
 0  2019-03-21 04:35:39

 <!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 ===“”）

解决方案5
 0  2019-03-21 05:14:09

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

在这里，我们使用带有关联复选框的label标签。 单击标签可切换复选框的状态。 然后，我们可以将:checked伪类与~ 相邻的同级选择器一起使用，以切换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标签已过时 ，不应再使用。 改用CSS。 正如其他所有人所提到的那样，id在页面上必须是唯一的，请改用类。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 按下按钮时隐藏/显示视频？ 单击按钮显示内容时如何隐藏按钮？ 如何显示隐藏字段并显示何时从下拉列表中选择值并按下按钮 如何在按下键时显示元素，然后再次按下该键隐藏元素？ 单击按钮时如何显示 div 内容并隐藏其他内容 - JavaScript 按下按钮时显示内容并更改活动按钮的颜色 处理按钮后如何隐藏内容并显示？ 显示/隐藏离子按钮中的图片 如果按下按钮组，则jQuery显示/隐藏div 显示/隐藏div的按钮必须按两次
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM