点击标题显示对应的内容

    *{
        padding: 0;
        margin: 0;

    }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }
    .flag {
        width:  80px;
        height: 3px;
        background-color: red;
        position: absolute;
       

    }
    a {
        text-decoration: none;
        width: 80px;
        display: inline-block;
        text-align: center;
    }


<div class="news">
    <div class="newt" id="newT">
        <a href="" class="cuxiao">促销</a>
        <a href="" class= "gg">公告</a>
        <a href="" class="good">好消息</a>
        <div id="flag" class="flag"></div>
    </div>
    <div class="new-con" id="newsbody">
        <div id="one" class="show">
        <ul>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
        </ul></div>
        <div id="one" class="hide">
        <ul>
            <li>22222222222222222</li>
            <li>22222222222222222</li>
            <li>22222222222222222</li>
            <li>22222222222222222</li>
        </ul></div>
        <div id="one" class="hide">
        <ul>
            <li>3333333333333333333</li>
            <li>3333333333333333333</li>
            <li>3333333333333333333</li>
            <li>3333333333333333333</li>
        </ul></div>
    </div>
</div>
<script>
var newT = document.getElementById('newT');
var newsbody = document.getElementById('newsbody');
var flag = document.getElementById('flag');
for(var i = 0;i<3;i++){
    var link = newT.children[i];
    link.onmouseover = linkmouseover;
    link.setAttribute('index',i);
}
function linkmouseover() {
    var offsetLeft = this.offsetLeft;
    animate(flag,offsetLeft);
    for (var i = 0,len = newsbody.children.length; i < len ;i++){
      var div = newsbody.children[i];
      //判断类样式是否已经有hide
      if (div.className.indexOf('hide')===-1){
          div.className = 'hide';
      }
    }
    var index = parseInt(this.getAttribute('index'));
    newsbody.children[index].className = 'show';
}
function animate (element,target) {
   var  timeid = null;
    if(timeid) {
        clearInterval(timeid);
        timeid = null;
    }
    timeid = setInterval(function () {
    var step = 6;
    var current = element.offsetLeft;
    if(current > target){
        step = -Math.abs(step);
    }
    if(Math.abs(current - target) <= Math.abs(step)){
    clearInterval(timeid);
    element.style.left = target+'px';
    return;}
    current += step;
    element.style.left = current + 'px';

    },3);
}

</script>