Javascript 按下按钮时如何隐藏/显示内容？
我正在设计一个网站，我想在他们点击按钮时显示内容，再次点击时隐藏内容。 我能够找到解决方案，但我必须为所有按钮编写不同的函数。我试了几次，但都没成功。如果你能帮助我，我将非常高兴 我通过Javascript 按下按钮时如何隐藏/显示内容？,javascript,css,html,web,Javascript,Css,Html,Web,我正在设计一个网站，我想在他们点击按钮时显示内容，再次点击时隐藏内容。 我能够找到解决方案，但我必须为所有按钮编写不同的函数。我试了几次，但都没成功。如果你能帮助我，我将非常高兴 我通过display:none隐藏按钮和按钮与此功能一起工作： function funcategory() { var a = document.getElementById("category"); if (a.style.display === "none") { a.style.display
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";
}
}
以下是点击按钮时必须显示的内容（再次点击时隐藏）：
演员
歌手
Instagram用户
模型
其他
XXX
以下是主按钮：
<button id="topbtn" onclick="funcategory()">Category</button
类别
演员
歌手
Instagram用户
模型
其他
XXX
instagram：
电报：@iammgt
电话：0935-185-1433
电话2:0990-4631983
首先，id
不能重复。您可以使用类作为替代。并使用document.querySelectorAll
获取所有按钮。还可以添加一个属性数据类型
您可以将其命名为任何东西，但必须将数据-
作为前缀&数据按钮
值将用于指向将隐藏/显示的部分。例如，检查该部分的数据类型
。之后，您可以使用classList.toggle
，它将隐藏/删除类以切换可见性
document.querySelectorAll（'.topbtn'）.forEach（函数（项）{
让getbtnda=item.dataset.button；
item.addEventListener（'click'，函数（e）{
document.querySelector（'[data type=“'+getbtnda+'“]'））.classList.toggle（'visibility'））
})
})
正文{
背景色：#ff5993；
}
.topbtn{
背景色：#bf42f4；
边界：无；
填充：10px；
字体大小：20px；
边界半径：6px；
利润率：10px；
左侧填充：20px；
右边填充：20px；
颜色：#0e0a0e；
光标：指针；
}
#类别{
背景色：#ff7700；
边界：无；
填充：10px；
字体大小：20px；
边界半径：6px；
利润率：10px；
左侧填充：20px；
右边填充：20px；
颜色：#0e0a0e；
光标：指针；
}
#类别{
显示：无；
}
#联系人{
背景色：#dddddd；
字体大小：25px；
显示：无；
}
.能见度{
显示：块！重要；
}
巴拉克
联系我们
随机的
类别
电报：@iammgt
电话：0935-185-1433
电话2:0990-4631983
1）不要使用相同的id
来定义元素
2） 您可以发送id
：onclick=“functategory（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） 你忘了关标签。现在已经过时了，或者您可以使用CSS：center
正文{
背景色：#ff5993；
}
.topbtn{
背景色：#bf42f4；
边界：无；
填充：10px；
字体大小：20px；
边界半径：6px；
利润率：10px；
左侧填充：20px；
右边填充：20px；
颜色：#0e0a0e；
光标：指针；
}
.类别{
背景色：#ff7700；
边界：无；
填充：10px；
字体大小：20px；
边界半径：6px；
利润率：10px；
左侧填充：20px；
右边填充：20px；
颜色：#0e0a0e；
光标：指针；
}
#类别内容{
显示：无；
}
#联系人内容{
背景色：#dddddd；
字体大小：25px；
显示：无；
}
var funcategory=函数（e）{
var a=document.getElementById（e+'content'）；
如果（a.style.display！=“块”）{
a、 style.display=“block”；
}否则{
a、 style.display=“无”；
}
}
巴拉克
联系我们
随机的
类别
全部的
矿
顶部
登录
电报：@iammgt
电话：0935-185-1433
电话2:0990-4631983
函数类（elem）{
如果（elem.style.display==“无”）{
elem.style.display=“块”；
}否则{
elem.style.display=“无”；
}
}
演员
歌手
Instagram用户
模型
其他
XXX
巴拉克
身体{
背景色：#ff5993；}
#topbtn{
背景色：#bf42f4；
边界：无；
填充：10px；
字体大小：20px；
边界半径：6px；
利润率：10px；
左侧填充：20px；
右边填充：20px；
颜色：#0e0a0e；
游标：指针；}
#类别{
背景色：#ff7700；
边界：无；
填充：10px；
字体大小：20px；
边界半径：6px；
利润率：10px；
左侧填充：20px；
右边填充：20px；
颜色：#0e0a0e；
游标：指针；}
#类别{
显示：无；}
#联系人{
背景色：#dddddd；
字体大小：25px；
显示：无；}
函数functcategory（）{
var a=document.getElementById（“类别”）；
如果（a.style.display==“”）{
a、 style.display=“block”；
}否则{
a、 style.display=“无”；
}
}
巴拉克
联系我们
随机的
类别
全部的
矿
顶部
登录
电报：@iammgt
电话：0935-185-1433
电话2:0990-4631983
如果您想同时避免使用javascript，可以使用复选框和一些奇特的css
这里我们使用带有相关复选框的标签
标记。单击标签可切换复选框的状态。然后我们可以使用带有~
的伪类来切换显示：none
/*这是一个魔术-在选中的复选框旁边隐藏div。
<!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>
var funcategory= function(e) {
var a = document.getElementById(e+'content');
if (a.style.display != "block") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
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>