<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>
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";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.current {
color: #f00;
}
</style>
</head>
<body>
<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>
<script>
let message_con = document.getElementById("message_con");
let dlList = message_con.getElementsByTagName('dl')
let m_essage = document.getElementById("m_essage");
let liList = m_essage.getElementsByTagName('li')
for (let i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
for (let j = 0; j < dlList.length; j++) {
dlList[j].className = ""
liList[j].className = ""
}
dlList[i].className = "current"
liList[i].className = "current"
}
}
</script>
</body>
</html>