javascript - 如何将列表项连接到 div 元素 javascript

Question

我正在尝试构建一个垂直选项卡，但列表项应该单独连接到 div。所有的 div 都隐藏了 display: none;当有人点击例如 tab2 时，第二个 div 应该变成显示: block 。换句话说，className“selected”将被添加到那个特定的 div。在 console.log 中出现以下错误(无法读取 HTMLUListElement 处的 null 属性“classList”。)。这里的任何人都知道如何编写 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>

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/