Open
Description
功能
点击菜单栏内容随点击切换
JS实现
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
/* 清除浮动 */
ul::after,
div::after{
content: '';
display: block;
clear: both;
}
#container{
height: 100%;
background-color: antiquewhite;
}
#banner{
background-color: aqua;
}
#menu{
background-color: red;
}
#menu ul {
float: right;
}
#menu ul li{
float: left;
margin-right: 20px;
list-style: none;
}
#main{
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="menu">
<ul>
<li><p class="A">a</p></li>
<li><p class="B">b</p></li>
</ul>
</div>
<div id="main"></div> <!-- 中间主要的部分 main -->
</div>
</body>
<script>
var ele = document.getElementById("banner")
ele.style.height = `${window.innerHeight}px`;
document.querySelectorAll('.A')[0].addEventListener('click', function(){
document.getElementById('main').innerText = document.querySelectorAll('.A')[0].innerText;
})
document.querySelectorAll('.B')[0].addEventListener('click', function(){
document.getElementById('main').innerText = document.querySelectorAll('.B')[0].innerText;
})
</script>
</html>
Vue实现
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
/* 清除浮动 */
ul::after,
div::after{
content: '';
display: block;
clear: both;
}
#container{
height: 100%;
background-color: antiquewhite;
}
#banner{
background-color: aqua;
}
#menu{
background-color: red;
}
#menu ul {
float: right;
}
#menu ul li{
float: left;
margin-right: 20px;
list-style: none;
}
#main{
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="menu">
<ul>
<li><a @click.prevent="changeComp(A)">a</a></li>
<li><a @click.prevent="changeComp(B)">b</a></li>
</ul>
</div>
<div id="main">
<component :is="compName"></component>
</div>
</div>
</body>
<script>
Vue.component('A', {
template: '<h1>A</h1>'
})
Vue.component('B', {
template: '<h1>B</h1>'
})
let v = new Vue({
el: '#container',
data: {
compName: 'A'
},
methods: {
changeComp: function(name){
this.compName = name;
}
}
})
</script>
</html>