标签：内容 spl tle 存储 index his elements oat body
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" > .xuanx{ width: 600px; height: 300px; background-color: red; } .clearfix:after{ content: ‘‘; visibility:hidden; height: 0; clear:both; display: block; } .nav a{ color: #fff; text-decoration: none; height: 30px; width: 200px ; line-height: 30px; text-align:center; display: inline-block; background-color: #000; float: left; } .content{ width: 600px; height: 270px; background-color: blue; } .content div{ display: none; } </style> </head> <body> <div class="xuanx"> <div class="nav clearfix " id = ‘link‘> <a href="javascript:void(0)">标题1</a> <a href="javascript:void(0)">标题2</a> <a href="javascript:void(0)">标题3</a> </div> <div class="content" id = ‘link-centent‘> <div style=‘display: block;‘> <span>内容1</span> </div> <div > <span>内容2</span> </div> <div > <span>内容3</span> </div> </div> </div> <script type="text/javascript"> var Aparent = document.getElementById(‘link‘); var Achild = Aparent.getElementsByTagName(‘a‘); var Div = document.getElementById(‘link-centent‘); var Divs = Div.getElementsByTagName(‘div‘); for(let i = 0;i<Achild.length;i++){ // Achild[i].index = i; 这里是用var的解决方法，将每一次循环的索引进行存储，后面进行直接调用 Achild[i].onclick = function(){ for(var j=0;j<Achild.length;j++){ Achild[j].style=‘‘; Divs[j].style=‘‘; } this.style.color= ‘red‘; this.style.backgroundColor=‘blue‘; // Divs[this.index].style.display=‘block‘; Divs[i].style.display=‘block‘; } } </script> </body> </html>
标签：内容 spl tle 存储 index his elements oat body
原文地址：https://www.cnblogs.com/whileke/p/11560201.html
