方法一、主要使用了传递参数的思想，把循环变量不能使用转换了一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nav{ width: 100%; height: 50px; text-align: center; } .nav li{ display: inline-block; padding-left: 20px; padding-right: 20px; list-style: none; background: red; color: #fff; text-align: center; height: 50px; width: 100px; line-height: 50px; border-radius: 10px; } .container{ width: 100%; height: 400px; background: #cccccc; border-radius: 20px; text-align: center; line-height: 400px; } .container div{ position: absolute; /*background: #fff;*/ width: 80%; left: 10%; top: 15%; height: 300px; margin: 0 auto; border-radius: 20px; /*display: none;*/ } .show{ z-index: 99; background: #cc6600; color: #fff; } .hide{ /*display: none;*/ z-index: 0; } </style></head><body> <div class="nav"> <ul> <li>导航一</li> <li>导航二</li> <li>导航三</li> <li>导航四</li> <li>导航五</li> </ul> </div> <div class="container" id='container'> <div class='show'>内容一</div> <div>内容二</div> <div>内容三</div> <div>内容四</div> <div>内容五</div> </div></body><script> window.οnlοad=function(){// 1、获取触发事件的元素 var oli = document.getElementsByTagName('li'); for (var i = 0; i < oli.length; i++) {// 2、给触发元素添加触发事件 oli[i].οnmοuseοver=function(){// 3、调用函数，执行事件 change(this); } } function change(obj){ var oli = document.getElementsByTagName('li'); var container = document.getElementById('container'); var oDiv = container.getElementsByTagName('div'); for (var i= 0; i< oli.length; i++) { if(oli[i]==obj){ oDiv[i].className='show'; }else{ oDiv[i].className ='hide'; } } } }方案二、排他思想和对象思想
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 100%; margin: 0 auto; } .body{ background: #cc6600; width: 100%; height: 500px; } .body div{ position: absolute; background: #fff; width: 50%; height: 50%; left: 25%; top: 25%; display: none; } .body div.show{ display: block; } </style></head><body> <div class="container"> <button>导航一</button> <button>导航二</button> <button>导航三</button> <button>导航四</button> <button>导航五</button> <button>导航六</button> </div> <div class="body" id='body'> <div class='show'>内容一</div> <div>内容二</div> <div>内容三</div> <div>内容四</div> <div>内容五</div> <div>内容六</div> </div></body><script> window.οnlοad=function(){// 1、获取元素 var btns = document.getElementsByTagName('button'); var body = document.getElementById('body'); var oDiv = body.getElementsByTagName('div');// 2、遍历元素 for(var i = 0;i<btns.length;i++){// 6、自定义属性，使触发元素与目标元素相关联 btns[i].index=i;// 3、添加事件 btns[i].οnclick=function(){// 4、遍历清除样式 for (var i= 0; i< btns.length; i++) { btns[i].className=''; oDiv[i].className=''; }// 5、给目标元素设置样式 oDiv[this.index].className='show'; } } }</script></html>
转载于:https://www.cnblogs.com/songdongdong/p/6034982.html
