Tab切换

it2025-06-15 13

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> //css样式 <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-color: purple; } .bd div { height: 255px; background-color: purple; display: none; } .bd div.current { display: block; } </style> </head> <body> <div class="box"> <div class="hd" id="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd" id="bd"> <div class="current">我是体育模块</div> <div>我是娱乐模块</div> <div>我是新闻模块</div> <div>我是综合模块</div> </div> </div> <script> // 先定义 var hd = document.getElementById('hd') var spans = hd.getElementsByTagName('span') var bd = document.getElementById('bd') var divs = bd.getElementsByTagName('div') //这个循环为了给每一个span 注册事件 for (var i = 0; i < spans.length; i++) { spans[i].setAttribute('index', i) // console.log('index') spans[i].onmouseover = function() { //这个循环为了找到每一个span for (var i = 0; i < spans.length; i++) { //让spans的i为空 spans[i].className = '' } this.className = 'current' //找到每一个div for (var i = 0; i < divs.length; i++) { divs[i].className = '' } var index = parseInt(this.getAttribute('index')) divs[index].className = 'current' } } </script> </body> </html>

最新回复(0)