点击导航栏,样式发生改变,不刷新页面,只改变div中内容
1.呈现效果
2.主要代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!DOCTYPE html> <html> <head> <title>test</title> <style> *{ margin: 0; padding: 0; } .test{ width: 1000px; height: 1000px; margin: 0 auto; } .test ul{ list-style: none; margin: 0 auto; display: flex; justify-content: center; } .test ul li{ width: 100px; float: left; text-align: center; } .test p{ display: block; cursor: pointer; } .box{ width: 1000px; height: 300px; background: #E7FB4A; clear: both; } #box1{ background: #53FD5D; } #box2{ background: #F4FD53; display: none; } #box3{ background: #FD7253; display: none; } .test p:hover{ background: #4874FF; } .btn1{ background: : #5C47F3; display: block; } .btn2{ background: #4874FF; display: block; } </style> </head> <body> <div class="test"> <ul> <li><p id="1" class="btn2">导航一</p></li> <li><p id="2" class="btn1">导航二</p></li> <li><p id="3" class="btn1">导航三</p></li> </ul> <div class="box" id="box1">这是第一个导航显示的内容</div> <div class="box" id="box2">这是第二个导航显示的内容</div> <div class="box" id="box3">这是第三个导航显示的内容</div> </div> <script type="text/javascript"> window.onload = function(){ var arr = document.getElementsByTagName('p'); for(var i = 0;i<arr.length;i++){ arr[i].onclick = function(){ if (this.id == '1' ) { document.getElementById("box1").style.display = 'block' ; document.getElementById("box2").style.display = 'none' ; document.getElementById("box3").style.display = 'none' ; } else if(this.id == '2') { document.getElementById("box1").style.display = 'none' ; document.getElementById("box2").style.display = 'block' ; document.getElementById("box3").style.display = 'none' ; } else{ document.getElementById("box1").style.display = 'none' ; document.getElementById("box2").style.display = 'none' ; document.getElementById("box3").style.display = 'block' ; } //this是当前激活的按钮,在这里可以写对应的操作 if(this.className == 'btn1'){ this.className = 'btn2'; var name = this.id; var btn = document.getElementsByClassName('btn2'); for(var j=0;j<btn.length;j++){ if(btn[j].id!=name){ btn[j].className = 'btn1'; } } } } } } </script> </body> </html>
实习时为公司做官网时,用到的一个效果,记下以备随时查看。。。。。。。。。
主要是js部分的代码,其他根据自己的需求可以岁时改写。