个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 14:06:32 25 4
gpt4 key购买 nike

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

我通过 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>

最佳答案

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

关于javascript - 按下按钮时如何隐藏/显示内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55273671/

25 4 0
文章推荐： javascript - 可以在 Vue.js 文档之外分离和重新附加 Vue.js 节点吗？
文章推荐： javascript - 从 querySelectorAll 更改为 getElementsByClassName 后，按钮未按预期删除元素
文章推荐： c# - Unity 移动设备 30fps 锁定
文章推荐： javascript - 如何从对象 [Firebase 唯一键] 中检索数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com