html部分

 <ul id="tab">
  <li>tab1</li>
  <li>tab2</li>
  <li>tab3</li>
</ul>
<div id="count">
  <div class="" style="display: block;">内容一</div>
  <div class="" style="display: none;">内容二</div>
  <div class="" style="display: none;">内容三</div>
</div>

js部分

<script>
  var tabs = document.getElementById('tab').children;
  var counts = document.getElementById('count').children;


  // 方法函数
  function tab(tabs , counts) {
    if ( typeof tabs !== Object || typeof counts !== Object) {
      return false
    }
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].index = i
      tabs[i].onmouseover = function () {
        for (var j = 0; j < tabs.length; j++) {
          tabs[j].className = ''
        }
        for (let j = 0; j < counts.length; j++) {
          counts[j].style.display = 'none';
        }
        tabs[this.index].className = 'active';
        counts[this.index].style.display = 'block';
      }
    }
  }
// 调用函数
tab(tabs , counts)
</script>