Показать Div, нажав на кнопку, скрыть других - PullRequest
Новая
       36

Показать Div, нажав на кнопку, скрыть других

4 голосов
/ 09 апреля 2020

Я хочу, чтобы содержимое контейнера div с идентификатором = '1' отображалось при нажатии на кнопку «Европа». При нажатии на кнопку «США» должно отображаться содержимое DIV с id 2.

У меня следующие проблемы с моим кодом: мне не удается выбрать, чтобы ни DIV, ни только определенный c не отображался при загрузке страницы. После первого нажатия на кнопку функция больше не работает.

Перевод www.DeepL.com/Translator (бесплатная версия) 

function showOne(id) {
    $('.hide').not('#' + id).hide();
}
<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='2'>About USA</div>
<div class='hide' id='1'>About Europe</div>

Ответы [ 3 ]

2 голосов
/ 09 апреля 2020

Вам просто нужно сначала показать текущий div при нажатии кнопки, например: 

function showOne(id) {
    $('#' + id).show();
    $('.hide').not('#' + id).hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='2'>About USA</div>
<div class='hide' id='1'>About Europe</div>
1 голос
/ 09 апреля 2020

Вы можете попытаться добавить метод .show(), чтобы показать все элементы перед скрытием: 

function showOne(id) {
    $('.hide').show().not('#' + id).hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='2'>About USA</div>
<div class='hide' id='1'>About Europe</div>
0 голосов
/ 09 апреля 2020

Честно говоря, это действительно простая проблема, я уверен, что уже есть ответ на такие проблемы, в любом случае, вы можете сделать что-то вроде этого:

Редактировать

Могу ли я добавим, что это решение включает только нативные веб-технологии, jQuery не было включено, я не уверен, является ли это плюсом или минусом в ваших глазах. В любом случае, если вы хотите узнать больше о нативном JavaScript, который я использовал, возможно, MDN будет хорошей отправной точкой. 

function showOne(id) {
  document.querySelectorAll(".hide").forEach(function (el) {
    el.style = "display: block;";
  });
  
  document.querySelector(".hide[id='" + id + "']").style = "display: none;";
};
.hide {
  display: none;
}
<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='1'>About USA</div>
<div class='hide' id='2'>About Europe</div>
...