样式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body * {
border: 1px solid red;
margin: 20px;
cursor: pointer;
}
li{
border: 0px solid red;
}
.condiv {
border: 0px solid red;
}
section div{
display: none;
height: 200px;
}
button{
display: block;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<section onclick="fn()">
<button>首页</button>
<div>首页11111111111111111111</div>
<button>服务</button>
<div>服务11111111111111111111</div>
<button>案例</button>
<div>案例11111111111111111111</div>
<button>关于</button>
<div>案例11111111111111111111</div>
</section>
<script>
function fn() {
var conDivs = document.querySelectorAll("section div")
conDivs.forEach(function (currentEle) {
currentEle.className = "hide";
})
var ele = event.target;
var lis = document.querySelectorAll("section button");
var arlis=Array.from(lis);
var liIndex=arlis.indexOf(ele)
console.log(liIndex)
if(liIndex!=-1){
conDivs[liIndex].className="show";
}
}
</script>
</body>
</html>
样式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hide {
display: none;
}
.show {
display: block;
}
section div {
border: 1px solid red;
height: 300px;
}
</style>
</head>
<body>
<div class="btns">
<button>导航一</button>
<button>导航二</button>
<button>导航三</button>
</div>
<section>
<div>
111111111111contont
</div>
</section>
<script>
var btns = document.querySelectorAll(".btns button");
btns.forEach(function (ele, i) {
ele.onclick = function () {
var div = document.querySelector("section div");
if (i == 0)
div.innerHTML = "1111111111111"
else if (i == 1)
div.innerHTML = "2222222222222"
else
div.innerHTML = "333333333333"
}
})
</script>
</body>
</html>