如何使用JavaScript将列表项连接到div元素

Question

我正在尝试构建一个垂直标签页，但是列表项应该分别连接到各自的div。所有的div都被隐藏(display: none;)，当有人点击例如tab2时，第二个div应该转换为display: block。换句话说，className"selected"将被添加到特定的div中。在控制台中出现以下错误(Cannot read property 'classList' of null at HTMLUListElement.)。这里有没有人知道如何编写JavaScript使得列表项与div相连。

请只使用纯JavaScript。

document.getElementById("verticalUl").addEventListener("click", function(e) {
    var e = e || window.event,
  elements = document.getElementById("verticalUl").children, 
  content = document.querySelectorAll(".support-box");

    if(e.target && e.target.nodeName == "LI") { 
     var attribute = e.target.getAttribute("id");
        for(var i = 0; i < elements.length; i++) {
            elements[i].classList.remove("active-support");
            
        }
        for (var i = 0; i < content.length; i++) {
             content[i].classList.remove("selected");
            };
        document.querySelector("." + attribute + "-box").classList.add("selected");
        e.target.classList.add("active-support");
    }
});

.group {
  display: none;
}

.selected {
  display: block;
}
.vertical-navbar {
  float: left;
  width: 20%;
}

.vertical-navbar li {
  list-style-type: none;
  border: 1px solid red;
  margin: 5px;
}

.support-box {
  width: 60%;
  float: right;
  height: 300px;
  border: 1px solid red;
}

<ul class="vertical-navbar" id="verticalUl">
    <li id="tab1" class="support-tabs-label active-support">Hot Topics</li>

    <li id="tab2" class="support-tabs-label">Account</li>

    <li id="tab3" class="support-tabs-label">Product</li>

    <li id="tab4" class="support-tabs-label">Order and Shipping</li>
</ul>
            
<div class="content-support1  support-box tab1-box group selected">
Hot Topics
</div>

<div class="content-support2 support-box tab2-box group">
Account
</div>

<div class="content-support3 support-box tab3-box group">
Product
</div>

<div class="content-support4 support-box tab4-box group">
Order and Shipping
</div>

- user7253564

---

什么问题？ - xDreamCoding

将li用数据属性装饰，例如data-divName='support1'，给你的div设置id=support1，然后当用户点击li元素时，读取数据属性，该属性将是div的ID，然后添加你的类。数据属性 - Searching

Answer 1

假设所有的 support-box 元素都有 tabx-box，其中 tabx 匹配被点击的 li 元素，那么你可以简单地使用：

document.querySelector("." + attribute + "-box").classList.add("selected");

解决方案

document.getElementById("verticalUl").addEventListener("click", function(e) {
    var e = e || window.event,
        elements = document.getElementById("verticalUl").children, 
        content = document.querySelectorAll(".support-box");

    for (var i = 0; i < content.length; i++) {
        content[i].classList.remove("selected");
    }

    if (e.target && e.target.nodeName == "LI") { 
        var attribute = e.target.getAttribute("id");

        for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove("active-support");
        }

        e.target.classList.add("active-support");
        document.querySelector("." + attribute + "-box").classList.add("selected");
    }
});

https://jsfiddle.net/j8k09r9s/1/

- Toby Mellor