方法1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style: none; } #tab { width: 480px; margin: 20px auto; border: 1px solid red; } ul { width: 100%; overflow: hidden; } ul li { float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a { text-decoration: none; color: black; } li.active { background-color: lightpink; } p { display: none; height: 200px; line-height: 200px; text-align: center; background-color: lightpink; } p.active { display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">图片</a></li> </ul> <p class="active">首页内容</p> <p>新闻内容</p> <p>图片内容</p> </div> </body> <script type="text/javascript"> // 获取li标签,注意是复数 var olis = document.getElementsByTagName('li'); // 获取p标签,注意是复数 var oPs = document.getElementsByTagName('p'); // 循环li标签 var i; // 变量提升 for (i = 0; i < olis.length; i++) { // 保存i的变量,因为i为全局的,i最终为3-->(变量提升) olis[i].index = i; // 给每个li标签绑定事件 olis[i].onclick = function () { // for循环清空之前属性 for (var j = 0; j < olis.length; j++) { // 清楚li标签属性 olis[j].className = ''; // 清楚p标签属性 oPs[j].className = '' } // 鼠标点击谁,谁就属性加上active this.className = 'active'; oPs[this.index].className = 'active'; } } </script> </html>
方法2:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style: none; } #tab { width: 480px; margin: 20px auto; border: 1px solid red; } ul { width: 100%; overflow: hidden; } ul li { float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a { text-decoration: none; color: black; } li.active { background-color: lightpink; } p { display: none; height: 200px; line-height: 200px; text-align: center; background-color: lightpink; } p.active { display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">图片</a></li> </ul> <p class="active">首页内容</p> <p>新闻内容</p> <p>图片内容</p> </div> </body> <script type="text/javascript"> // 获取li标签,注意是复数 let olis = document.getElementsByTagName('li'); // 获取p标签,注意是复数 let oPs = document.getElementsByTagName('p'); // 循环li标签 for (let i = 0; i < olis.length; i++) { // 给每个li标签绑定事件 olis[i].onclick = function () { // for循环清空之前属性 for (let j = 0; j < olis.length; j++) { // 清楚li标签属性 olis[j].className = ''; // 清楚p标签属性 oPs[j].className = '' } // 鼠标点击谁,谁就属性加上active this.className = 'active'; oPs[i].className = 'active'; } } </script> </html>