javascript - 使用javascript参数隐藏和显示DIV

Question

我正在尝试使用纯 Javascript 进行隐藏和显示事件 字符串 参数。一旦显示其中一个，我想隐藏另一个 div(假设有多个 div)。

我试图自己做，但我只能点击一次才能显示。我不知道如何隐藏其余部分，只显示指定的 div。

下面是我的代码:

function show(id) {
  if (document.getElementById('div_'+id).style.display == 'none') {
    document.getElementById('div_'+id).style.display = 'block';
  }
  return false;
}

.title {
  border:1px solid red;
  display: inline-block;
  font-size: 16px;
}

.content {
  border: 1px solid blue;
  display: inline-block;
  font-size: 16px;
  width: 300px;
}

<div class="title" onclick="show('first');">Title 1</div>
<div class="content" id="div_first" style="display:none;">Content 1
</div>

<div class="title" onclick="show('sec');">Title 2</div>
<div class="content" id="div_sec" style="display:none;">Content 2
</div>

Answer 1

您可以使用 data-*属性来存储目标选择器。

不要使用内联 on*处理程序。将您的 JS 放在一处。

使用 CSS .is-active操纵可见性状态，如 display: block;

const showBtn = document.querySelectorAll('[data-show]');
const content = document.querySelectorAll('.content');

function show(ev) {
  const selector = ev.currentTarget.getAttribute('data-show');
  const elToShow = document.querySelectorAll(selector);
  content.forEach(el => el.classList.remove('is-active'));
  elToShow.forEach(el => el.classList.add('is-active'));
}

showBtn.forEach(el => el.addEventListener('click', show));

.title {
  border:1px solid red;
  display: inline-block;
  font-size: 16px;
}

.content {
  border: 1px solid blue;
  display: inline-block;
  font-size: 16px;
  width: 300px;
  display: none;  /* ADD THIS */
}

.content.is-active{ /* ADD THIS */
  display: block;
}

<div class="title" data-show="#content-1">Title 1</div>
<div class="title" data-show="#content-2">Title 2</div>

<div class="content" id="content-1">Content 1</div>
<div class="content" id="content-2">Content 2</div>