как скрыть / показать контент при нажатии кнопки? - PullRequest
Новая
       3

как скрыть / показать контент при нажатии кнопки?

1 голос
/ 21 марта 2019

Я разрабатываю веб-сайт и хочу показывать контент, когда они нажимают на кнопку, и скрывать, когда они нажимают снова. Мне удалось найти решение, но я должен написать разные функции для всех кнопок. Я попробовал несколько вещей, но не смог сделать это. Я буду так рад, если ты поможешь мне. ;)

Я скрываю кнопки 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 ]

2 голосов
/ 21 марта 2019

Прежде всего 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>
0 голосов
/ 21 марта 2019

Если вы хотите избежать 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. И, как уже упоминалось, идентификатор должен быть уникальным на странице, вместо этого используйте классы.

0 голосов
/ 21 марта 2019 

<!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 голосов
/ 21 марта 2019 
 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 голосов
/ 21 марта 2019

1) Не используйте тот же id для определения элементов, он должен быть уникальным в документе. .

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...