使用JavaScript写一个简单的tab栏切换

tab栏切换demo样式如下：

HTML代码如下

<div class="box">
    <div id="hd" class="hd">
      <span class="current">新闻</span>
      <span>体育</span>
      <span>娱乐</span>
      <span>媒体</span>
    </div>
    <div id="bd" class="bd">
      <div class="current">这是新闻模块</div>
      <div>这是体育模块</div>
      <div>这是娱乐模块</div>
      <div>这是媒体模块</div>
    </div>
  </div>

css代码

.box {
    
    
      width: 230px;
      height: 230px;
      background-color: #adc;
      margin-top: 200px;
      left: 50%;
      transform: translateX(-50%);
      position: relative;
    }
    .hd span {
    
    
      display: inline-block;
      width: 50px;
      height: 30px;
      background-color: #cda;
      text-align: center;
      line-height: 30px;
      margin-bottom: 20px;
      border-bottom: 2px solid red;
      cursor: pointer;
    }
    .hd .current {
    
    
      background-color: #adc;
    }
    .bd div{
    
    
      display: none;
    }
    .bd div.current {
    
    
      display: block;
    }

JavaScript代码

var hd = document.getElementById('hd');
    var spans = hd.getElementsByTagName('span');
    var bd = document.getElementById('bd');
    var divs = bd.getElementsByTagName('div');
    for (var i = 0; i < spans.length; i++) {
    
    
      var span = spans[i];
      // 为span设置自定义属性，记录当前span的索引
      span.setAttribute('index', i)
      
      // 鼠标经过span标签时的函数
      span.onmouseover = function() {
    
    
        // 鼠标经过span时，取消所有span的样式
        for(var i = 0; i < spans.length; i++) {
    
    
          var span = spans[i];
          span.className = '';
        }
        // 为当前span加上高亮显示
        this.className = 'current'
        // 鼠标经过span时，所有div隐藏
        for(var i = 0; i < divs.length; i++) {
    
    
          var div = divs[i];
          div.className = '';
        }
        // 根据span的索引，显示对应索引div的值
        var index = parseInt(this.getAttribute('index'));
        // 鼠标经过span时，显示对应的div
        divs[index].className = 'current'
      }
    }

由于自己是前端小白，一些知识点，自己学了以后，发现记不住，但是又比较实用，就写成blog记录一些，写的不好之处还望大神提点~