演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
.box{width: 302px;height: 302px;border: 1px solid #000;
text-align: center;margin: 100px auto;}
nav{width: 300px;height: 30px;border-bottom: 2px solid #000;}
nav a{width: 100px;height: 30px;line-height: 30px;display: block;float: left;}
.content{width: 300px;height: 270px;overflow: hidden;}
.cont{width: 300px;height: 270px;line-height: 270px;}
#one{background-color: #ff0000;}
#two{background-color: #00ff00;}
#three{background-color: #0000ff;}
</style>
</head>
<body>
<!-- .box -->
<div class="box">
<!-- nav>a*3 -->
<nav>
<a href="#one">按钮1</a>
<a href="#two">按钮2</a>
<a href="#three">按钮3</a>
</nav>
<div class="content">
<div id="one" class="cont">内容1</div>
<div id="two" class="cont">内容2</div>
<div id="three" class="cont">内容3</div>
</div>
</div>
</body>
</html>