仿京东tab导航栏切换
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background-color: #eee; } ul { list-style: none; } .box { width: 1000px; position: relative; left: 50px; background-color: #fff; } .box ul { height: 38px; line-height: 38px; background-color: #f7f7f7; border-bottom: 1px solid red; overflow: hidden; } .box ul li { float: left; padding: 0 15px; cursor: pointer; font-size: 14px; color: #333; } .box ul li:hover { color: #e4393c; } .content { /* position: absolute; left: 0; top: 40; */ display: none; width: 100%; height: 200px; background-color: #fff; } .active { background-color: #e4393c; color: #fff !important; } </style> </head> <body> <div class="box"> <!-- tab导航 --> <ul> <li index='info'>商品介绍</li> <li index="specs">规格与包装</li> <li index="Aftermarket">售后保障</li> <li index="comment">商品评价(2.2万+)</li> <li index="phone">手机社区</li> </ul> <!-- 内容展示区域 --> <!-- 商品介绍 --> <div id="info" style="display: block;" class="content">商品介绍</div> <!-- 规格与包装 --> <div id="specs" class="content">规格与包装</div> <!-- 售后与保障 --> <div id="Aftermarket" class="content">售后与保障</div> <!-- 商品评价 --> <div id="comment" class="content">商品评价</div> <!-- 手机社区 --> <div id="phone" class="content">手机社区</div> </div> <script> var lis = document.querySelectorAll('li') var cs = document.querySelectorAll('.content') for (var i = 0; i < lis.length; i++) { lis[i].onclick = function () { // 重置所有的li标签为默认样式 reset() // 设置当前单击的li标签为active this.className = 'active' // 重置所有的content 为隐藏 resetContent() // 设置当前单击的li标签对应的content显示 var index = this.getAttribute('index') document.querySelector(`#${index}`).style.display = 'block' /*var txt = this.innerHTML console.log(txt); if (txt == '商品介绍') { document.querySelector('#info').style.display = 'block' } else if (txt == '规格与包装') { document.querySelector('#specs').style.display = 'block' }else if (txt == '售后保障') { document.querySelector('#Aftermarket').style.display = 'block' }else if (txt == '商品评价(2.2万+)') { document.querySelector('#comment').style.display = 'block' }else if (txt == '手机社区') { document.querySelector('#phone').style.display = 'block' }*/ } } // 重置所有li标签的样式为默认样式 function reset() { for (var i = 0; i < lis.length; i++) { lis[i].className = '' } } function resetContent() { for (var j = 0; j < cs.length; j++) { cs[j].style.display = 'none' } } </script> </body> </html>