Javascript 添加和删除类以更改div的内容？

所以我有10个列表元素，每个元素都与不同的内容相关联

我希望能够单击其中一个列表元素，并让一个div显示与之关联的内容

我只想一次显示一个页面的内容

<div class="contentSection">
    <ul class="serviceListContent anchorTag">
        <li class="contentLink step1"><a href="#">Establishing Your Property's Value</a>
        </li>
        <li class="contentLink step2"><a href="#">Selecting an Estate Agent</a>
        </li>
        <li class="contentLink step3"><a href="#">Preparing Your Property</a>
        </li>
        <li class="contentLink step4"><a href="#">Viewings</a>
        </li>
        <li class="contentLink step5"><a href="#">Negotiation</a>
        </li>
        <li class="contentLink step6"><a href="#">Agreeing The Sale</a>
        </li>
        <li class="contentLink step7"><a href="#">Initiating The Sale Process</a>
        </li>
        <li class="contentLink step8"><a href="#">Conveyancing</a>
        </li>
        <li class="contentLink step9"><a href="#">Finance</a>
        </li>
        <li class="contentLink step10"><a href="#">The Chain</a>
        </li>
    </ul>
</div>
<div class="contentSection">
    <div class="linkContent step1"></div>
    <div class="linkContent step2"></div>
    <div class="linkContent step3"></div>
    <div class="linkContent step4"></div>
    <div class="linkContent step5"></div>
    <div class="linkContent step6"></div>
    <div class="linkContent step7"></div>
    <div class="linkContent step8"></div>
    <div class="linkContent step9"></div>
    <div class="linkContent step10"></div>
</div>

---

也许你可以看看jquery手风琴。我怀疑这就是你要找的

---

有了html，您就可以这样做

使用要显示的步骤类名称的值向列表项添加自定义属性

<li class="contentLink step1" data-showstep="step1"><a href="#">Establishing Your Property's Value</a>

有了这个，你还需要确保你的内容在默认情况下是隐藏的，或者只选择一个来显示

div.linkContent{
    display: none;
}
div.linkContent.showing{
    display: block;
}

这是一把小提琴：

window.onload=函数{ var el=document.queryselectoral.contentLink； 对于变量i=0；i你的代码在哪里？你看到Jquery标签了吗

div.linkContent{
    display: none;
}
div.linkContent.showing{
    display: block;
}