console
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.Box{
width: 861px;
border: 1px solid #e1e1e1;
margin:100px auto;
padding:20px 23px 6px 20px;;
}
.tabs-row{
overflow: hidden;
border-bottom: 1px solid #e1e1e1;
}
.tabs{
width: 86px;
height: 45px;
line-height: 45px;
text-align: center;
float: left;
margin-right: 26px;
font-size: 15px;
}
.con{
width: 100%;
margin-top:10px;
display:none;
}
.current{
border-bottom: 4px solid #6c8ca5;
color: #6c8ca5;
}
</style>
</head>
<body>
<div class="Box" id="box">
<div class="tabs-row">
<p class="tabs current" >热门活动</p>
<p class="tabs">产品公告</p>
<p class="tabs">系统公告</p>
</div>
</div>
<script>
var box = document.getElementById('box');
var tabs = document.getElementsByClassName('tabs');
var divs = box.getElementsByClassName('con')
for(var i=0;i<tabs.length;i++){
var btn = tabs[i];
btn.index = i;
btn.onclick = function(){
for(var j=0;j<tabs.length;j++){
tabs[j].classList.remove('current');
}
this.classList.add('current');
for(var k = 0;k<divs.length;k++){
divs[k].style.display = 'none';
}
divs[this.index].style.display = 'block';
}
}
</script>
</body>
</html>