面板组件demo

<dl>
    <dt>houdunren</dt>
    <dd>1</dd>
    <dt>hscms</dt>
    <dd hidden="hidden">2</dd>
</dl>

<style>
    dt{
        border: 1px solid red;
        background-color: royalblue;
    }
    dd{
        border: 2px solid burlywood;
        margin: 10px auto;
    }
</style>

function panel(i){
    let dds=document.querySelectorAll("dd");
    dds.forEach(dd=>dd.setAttribute("hidden","hidden"));
    dds[i].removeAttribute("hidden");
}
document.querySelectorAll("dt").forEach((dt,i)=>{
    dt.addEventListener("click",()=>panel.call(null,i));
})