关于#JS tab#的问题，如何解决？

Question

    <div class="message">
            <div class="message_title">
                    <ol id="m_essage">
                        <li class="current"><a href="#" >原创专区</a></li>
                        <li><a href="#">作品展示</a></li>
                    </ol>
                    <a href="#" class="tittle_mark tittle_mark1">more»</a>
            </div>    
        <div id="message_con">
            <dl class="current">
                <dt class="message_left"></dt>
                <dd class="message_right">
                    <ul class="left_ul">
                        <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
                        <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
                        <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
                        <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
                        <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
                    </ul>
                    <ul class="right_ul">
                        <li><a href="#">2020/06</a></li>
                        <li><a href="#">2020/06</a></li>
                        <li><a href="#">2020/06</a></li>
                        <li><a href="#">2020/06</a></li>
                        <li><a href="#">2020/07</a></li>
                    </ul>
                </dd>
              </dl>
              <dl>
                <dt class="message_left1"></dt>
                <dd class="message_right">
                    <ul class="left_ul">
                        <li><span></span><a href="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                        <li><span></span><a href="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                        <li><span></span><a href="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                        <li><span></span><a href="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                        <li><span></span><a href="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                    </ul>
                    <ul class="right_ul">
                        <li><a href="#">2020/07</a></li>
                        <li><a href="#">2020/07</a></li>
                        <li><a href="#">2020/06</a></li>
                        <li><a href="#">2020/07</a></li>
                        <li><a href="#">2020/06</a></li>
                    </ul>
                </dd>
             </dl>
        </div>
    </div>

Answer 1

        var li=document.querySelectorAll("#m_essage li");
        var div=document.querySelectorAll("#message_con dl")
        for(var i=0;i<li.length;i++){
            li[i].index=i;
            li[i].onclick=function(){
                for(var j=0;j<li.length;j++){
                    li[j].className="";
                    div[j].className=""
                }
                this.className="current";
                div[this.index].className="current";
            }
        }