Snip20170621_20.png
点击相应的a,下面变成相应的div
注意overflow的使用,可以切除超过的多余部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 200px;
border: 1px solid red;
overflow: hidden; /*超出的部分全部切掉,如果不写这个属性,红绿黄三个盒子竖着排一排,写这个属性,只显示红色的盒子,超出的部分被切掉了*/
}
.one,.two,.tree{
width: 300px;
height: 200px;
}
.one{
background-color: red;
}
.two{
background-color: green;
}
.tree{
background-color: yellow;
}
a{
display: inline-block;
width: 40px;
border: 1px solid lightcoral;
}
</style>
</head>
<body>
<a href="#one">div1</a>
<a href="#two">div2</a>
<a href="#tree">div3</a>
<div class="box">
<div class="one" id="one">
div1
</div>
<div class="two" id="two">
div2
</div>
<div class="tree" id="tree">
div3
</div>
</div>
</body>
</html>
网友评论