Javascript 隐藏博客帖子的JS函数

我创建了一个博客网站，主要分为三类：投资、金钱和退休。我添加了一个与每个主题类别对应的class元素。我试图创建JS函数，当单击时，隐藏其他两个类别（我使用它来避免每个类别都有一个主页）。下面是一个通过隐藏投资和资金类别来显示退休类别的函数：

    function showRetirement() {
        var abc = document.getElementsByClassName("Investing, Money");
        for (var abc2 = 0; abc2 < abc.length; abc2++) {
        abc[abc2].style.display = "none";
            }
        }

函数showRetirement（）{
var abc=document.getElementsByClassName（“投资，资金”）；
对于（var abc2=0；abc2

不用说，这是行不通的。方括号表示函数“已定义但从未使用过”，还表示var abc“未定义文档”

这是我的功能链接：

<div class="nav-link" onclick="showRetirement()">Retirement</div>

退休 谢谢你

欢迎来到苏丹

getElementsByClassName

不允许在一次调用中通过多个类名进行检索。 相反，使用

document.querySelectorAll（）

方法会更容易，该方法允许使用查询选择器从页面中选择项目。 用于选择类为

投资

或

货币

的所有项目的查询选择器如下所示：

投资，.Money

作为旁注，此时可以忽略括号编辑器中的警告，编辑器没有意识到您正在从

onClick=“

处理程序调用此函数，因此认为该函数没有使用

另一方面，通常在for循环中使用变量

i

，其他程序员将更容易理解变量的用途

示例解决方案，使用querySelectorAll

function showRetirement() {
    var elements = document.querySelectorAll(".Investing, .Money");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = "none";
    }
}

函数showRetirement（）{
var ar_el；
ar_el=document.getElementsByClassName（“投资”）；
对于（变量i=0；i

}

function showRetirement() {
    var elementsToHide = document.querySelectorAll(".Investing, .Money");
    for (var i = 0; i < elementsToHide.length; i++) {
        elementsToHide[i].style.display = "none";
    }

    var elementsToShow = document.querySelectorAll(".Retirement");
    for (var i = 0; i < elementsToShow.length; i++) {
        elementsToShow[i].style.display = "block";
    }
}

function showRetirement(){
 var ar_el;
 ar_el = document.getElementsByClassName("Investing");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "none";

 ar_el = document.getElementsByClassName("Money");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "none";

 ar_el = document.getElementsByClassName("Retirement");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "block";