如何使用 javascript 切换一个部分同时隐藏其他部分？

Question

我从其他人那里找到了一个代码片段，解释了如何在隐藏另一个元素的同时打开一个元素，尽管它是用 jquery 制作的。我的考试需要纯 Javascript 中的相同代码。现在我已经转换了它，有没有人知道我的问题是什么？我收到控制台警告

"(index):933 Uncaught TypeError:
document.querySelector(...).hideElement is not a function
at hideElement ((index):933)
at showDiv ((index):927)
at HTMLDivElement.onclick ((index):908)"

任何人都可以帮我创建一个新的 Javascript 函数来打开隐藏部分并隐藏其他部分，或者帮我修复我的代码吗？

这里是原jQuery代码：

function showDiv(data) {
  $("#ele-" + data).addClass('visibleClass');
  hideElement(6, data);
}

function hideElement(total, active) {
  for (i = 1; i <= total; i++) {
    if (i != active)
      $("#ele-" + i).removeClass('visibleClass');
  }
}

.press {
  background: red;
  float: left;
  padding: 20px;
  margin-left: 20px;
}

.visibleClass {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="x_1" class="press" onclick="showDiv('1')">1</div>
<div id="x_2" class="press" onclick="showDiv('2')">2</div>
<div id="x_3" class="press" onclick="showDiv('3')">3</div>
<div id="x_4" class="press" onclick="showDiv('4')">4</div>
<div id="x_5" class="press" onclick="showDiv('5')">5</div>
<div id="x_6" class="press" onclick="showDiv('6')">6</div>

<br><br><br><br>

<div id="ele-1" style="display: none;">show data 1</div>
<div id="ele-2" style="display: none;">show data 2</div>
<div id="ele-3" style="display: none;">show data 3</div>
<div id="ele-4" style="display: none;">show data 4</div>
<div id="ele-5" style="display: none;">show data 5</div>
<div id="ele-6" style="display: none;">show data 6</div>

这是我将其转换为 javascript:

的方法

function showDiv(data) {
  document.querySelector("#ele-" + data).classList.add('visibleClass');
  hideElement(6, data);
}

function hideElement(total, active) {
  for (i = 1; i <= total; i++) {
    if (i != active)
      document.querySelector("#ele-" + i).removeClass('visibleClass');
  }
}

.press {
  background: red;
  float: left;
  padding: 20px;
  margin-left: 20px;
}

.visibleClass {
  display: block !important;
}

<div id="x_1" class="press" onclick="showDiv('1')">1</div>
<div id="x_2" class="press" onclick="showDiv('2')">2</div>
<div id="x_3" class="press" onclick="showDiv('3')">3</div>
<div id="x_4" class="press" onclick="showDiv('4')">4</div>
<div id="x_5" class="press" onclick="showDiv('5')">5</div>
<div id="x_6" class="press" onclick="showDiv('6')">6</div>

<br><br><br><br>

<div id="ele-1" style="display: none;">show data 1</div>
<div id="ele-2" style="display: none;">show data 2</div>
<div id="ele-3" style="display: none;">show data 3</div>
<div id="ele-4" style="display: none;">show data 4</div>
<div id="ele-5" style="display: none;">show data 5</div>
<div id="ele-6" style="display: none;">show data 6</div>

Answer 1

检查可见的 class 是否存在 document.querySelector('.visibleClass') 并将其删除。

然后将 visibleClass 设置为单击的元素。

function showDiv(data) {
    if (document.querySelector('.visibleClass')) {
        document.querySelector('.visibleClass').classList.remove('visibleClass');
    }
    document.querySelector("#ele-" + data).classList.add('visibleClass');
}

<style>
  .press {
  background: red;
  float: left;
  padding: 20px;
  margin-left: 20px;
}
.visibleClass {
  display: block !important;
}
</style>

<div id="x_1" class="press" onclick="showDiv('1')">1</div>
<div id="x_2" class="press" onclick="showDiv('2')">2</div>
<div id="x_3" class="press" onclick="showDiv('3')">3</div>
<div id="x_4" class="press" onclick="showDiv('4')">4</div>
<div id="x_5" class="press" onclick="showDiv('5')">5</div>
<div id="x_6" class="press" onclick="showDiv('6')">6</div>
<br>
<br>
<br>
<br>
<div id="ele-1" style="display: none;">show data 1</div>
<div id="ele-2" style="display: none;">show data 2</div>
<div id="ele-3" style="display: none;">show data 3</div>
<div id="ele-4" style="display: none;">show data 4</div>
<div id="ele-5" style="display: none;">show data 5</div>
<div id="ele-6" style="display: none;">show data 6</div>

如何使用 javascript 切换一个部分同时隐藏其他部分？

how to toggle a section whilst hiding the others using javascript?

javascript

html

jquery

css

html-helper