<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> .pg_top .menu { background-color: gold; width: 400px; height: auto; position: absolute; left: 200px; } .item { float: left; margin: 10px 0; padding: 0 20px; font-size: 25px; } .content { position: absolute; left: 200px; top: 58px; background-color: burlywood; width: 400px; height: 200px; } .hide { display: none; } .bk { background-color: greenyellow; } </style> </head> <body> <div> <div> <div con="h1">十八里店</div> <div con="h2">簋街</div> <div con="h3">后海</div> </div> <div> <div con="h1">烤全羊</div> <div con="h2">麻辣龙虾</div> <div con="h3">相约酒吧</div> </div> </div> <script> function Show(ths) { //当我点这个标签的时候,其他标签的背景色变没 var baba = ths.parentElement.children; //获取到了每个子元素 var target = ths.getAttribute('con'); for (i = 0; i < baba.length; i++) { if (ths == baba[i]) { //做判断， ths.classList.add('bk') //添加属性 } else { baba[i].classList.remove('bk') //删除属性 } } //内容 var current_con = document.getElementById('content').children; console.log(current_con) for (j=0; j<current_con.length;j++) { var s_att = current_con[j].getAttribute('con') if (target == s_att ) { current_con[j].classList.remove('hide'); }else{ current_con[j].className = 'hide'; } } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul{ list-style: none; padding: 0; margin: 0; } ul li{ float: left; background-color: #2459a2; color: white; padding: 8px 10px; } .clearfix:after{ display: block; value:'111'; content: '.'; height: 0; /*visibility: hidden;*/ clear: both; } .hide{ display: none; } .tab-menu .title{ background-color: #dddddd; } .tab-menu .title .active{ background-color: white; color: black; } .tab-menu .content{ border: 1px solid #dddddd; min-height: 150px; } </style> </head> <body> <div> <div> <div> <ul> <li target='h1'>十八里店</li> <li target='h2'>簋街</li> <li target='h3'>十刹海</li> </ul> </div> <div> <div con="h1">烤羊腿</div> <div con="h3" <!--class="hide"-->>油焖小龙虾</div> <div con="h2" <!--class="hide"-->>香甜鸡尾酒</div> </div> </div> </div> <script> function Show(ths){ //ths表示当前标签 var target = ths.getAttribute('target')//h3 //给自己添加样式active //兄弟们去掉 ths.className = 'active'; var brothers = ths.parentElement.children; for(var i=0;i<brothers.length;i++){ if ( ths == brothers[i]){ }else{ brothers[i].removeAttribute('class') } } //操作内容 var contents = document.getElementById('content').children; console.log(contents) for (var j=0;j<contents.length;j++){ var current_content = contents[j]; console.log(current_content) var con = current_content.getAttribute('con') if (con == target){ current_content.classList.remove('hide'); }else{ current_content.className="hide"; } } } </script> </body> </html>
案例九：返回顶部
主要知识点：onscroll 和document.body.scrollTop;