Question

我是新来的，我试图尽可能清楚地解释我的问题。我想使索引成为大型文档的一部分。我有从A到Z命名的Buttons或Links（在本例中仅是divs），每个字母都属于从所选字母开始的一堆单词，例如字典。

我要实现的目标：如果单击一个字母，单词列表将出现在按钮下方。之后，我单击另一个字母，第一个激活的列表将消失，然后显示下一个，依此类推。

我在不同的站点上找到了几种如何显示和隐藏内容的解释，并且它已经以某种方式起作用（我必须再次单击该字母才能将其隐藏，所以尚未达到我的目标），但是我没有找到这样的代码或教程。

请帮助，也许您有个好主意！

我的代码：

html：

    <div onclick="openIndexA()">A</div>
    <div onclick="openIndexB()">B</div>
    <div onclick="openIndexC()">C</div>
    <!-- etc. -->

    <div class="letters" id="A">
        <p>A...1</p>
        <p>A...2</p>
        <p>A...3</p>
    </div>

    <div class="letters" id="B">
        <p>B...1</p>
        <p>B...2</p>
        <p>B...3</p>
    </div>

    <div class="letters" id="C">
        <p>C...1</p>
        <p>C...2</p>
        <p>C...3</p>
    </div>
    <!-- etc. -->

css：

.letters {
    display: none;
}

在openIndex.js中：

function openIndexA() {
  var x = document.getElementById("A");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function openIndexB() {
  var x = document.getElementById("B");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function openIndexC() {
  var x = document.getElementById("C");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
<!-- etc. -->

我知道，这不是最好，最短的方法，我可以反复尝试，尽管我尝试过，但直到现在仍没有实现。我想首先看到它是如何工作的。但是，如果您对此有任何建议，或者应该更改整个概念，请随时解释，我愿意学习！.. :-)

Answer 1

这是一个解决方案和一些建议：

function openIndex(id) {
  document.querySelectorAll('.letters').forEach(elt => elt.classList.remove('active'));
  document.querySelector('#'+id).classList.add('active');
}

.letters {
    display: none;
}

.letters.active {
    display: block;
}

<div onclick="openIndex('A')">A</div>
    <div onclick="openIndex('B')">B</div>
    <div onclick="openIndex('C')">C</div>
    <!-- etc. -->

    <div class="letters" id="A">
        <p>A...1</p>
        <p>A...2</p>
        <p>A...3</p>
    </div>

    <div class="letters" id="B">
        <p>B...1</p>
        <p>B...2</p>
        <p>B...3</p>
    </div>

    <div class="letters" id="C">
        <p>C...1</p>
        <p>C...2</p>
        <p>C...3</p>
    </div>
    <!-- etc. -->

对于您的CSS：不要直接使用样式，请尽可能使用类。

如您所见，在这里，我添加了一个类active。如果添加它，它将编辑样式。

然后，对于您的JavaScript：如果复制粘贴两次以上，则很可能可以使用一个函数。

在这里，我已完成以下操作：将要激活的ID作为参数传递。然后，我拿走所有的letters项目，然后去掉active类。然后，仅对所选的那个添加active类。

我希望这很清楚，对您有帮助：）

Answer 2

看到这个fiddle！

var openIndex = document.querySelectorAll('.openindex');
var letters = document.querySelectorAll('.letters');

openIndex.forEach(function(el){
    el.addEventListener('click', function(){
        letters.forEach(function(e){
            e.classList.remove('show');
        });
        var id = el.getAttribute('data-id');
        document.getElementById(id).classList.add('show');
      });
});

并添加此CSS类

.show {
    display: block;
}

Javascript单击一个元素会显示它，然后单击另一个：隐藏第一个元素并显示第二个元素

2 个答案: