tab栏切换 · JavaScript

## 案例 ``` <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display: inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background: purple; } .bd div { height: 255px; background-color: purple; display: none; } .bd div.current { display: block; } </style> </head> <body> <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> <script> function $(id) { return document.getElementById(id); } var hd = $('hd'); var spans = hd.getElementsByTagName('span'); for (let i = 0; i < spans.length; i++) { var span = spans[i]; //通过自定义属性,记录当前span的索引 span.setAttribute('index', i); //注册事件 span.onmouseover = fn; } //function之所以写在这里,是为了优化和不让代码嵌套过多 //鼠标经过事件处理 function fn() { //让所有span取消高亮 for (let i = 0; i < spans.length; i++) { var span = spans[i]; span.className = ''; } //当前的span高亮显示 this.className = 'current'; //tab栏对应的DIV显示,其他DIV隐藏 var bd = $('bd'); var divs = bd.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) { var div = divs[i]; div.className = ''; } //当前span对应的div显示,获取自定义属性的值 var index = parseInt(this.getAttribute('index')); divs[index].className = 'current'; } </script> ```