一般都是div 实现切换选项卡的时候
个人思路 :
三个div的大小设置一样后,用left margin 定位,然后设置display:none让其他元素不见。
其他思路之后找一找
之后补充
<body>
<div id="app">
<div class="left1">Home</div>
<div class="center1">Posts</div>
<div class="right1">Archive</div>
<div class="bottom1">Home component</div>
<div class="bottom2">Posts componet</div>
<div class="bottom3">Archive componet</div>
</div>
<style>
.left1,.center1,.right1{
width:100px;
height:20px;
border:1px solid black;
border-bottom:0px solid black;
float: left;
}
.center1{
border-left: 0px solid black;
border-right: 0px solid black;
}
.bottom1{
width: 400px;
height:20px;
border:1px solid black;
clear:both;
}
.bottom2{
width: 400px;
height:20px;
border:1px solid black;
display: none;
margin-top:-21px;
}
.bottom3{
width: 400px;
height:20px;
border:1px solid black;
display: none;
margin-top: -22px;
}
</style>