<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
background-color: yellow;
padding-left: 20px;
padding-right: 20px;
}
.k div {
background-color: green;
text-align: center;
line-height: 220px;
width: 220px;
height: 220px;
display: none;
}
.k .k1{
background-color:red;
}
.k .k2{
background-color: pink;
}
.k .k3{
background-color: purple;
}
.k5{
width: 220px;
height: 220px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span class="t1">1</span>
<span class="t2">2</span>
<span class="t3">3</span>
<span class="t4">4</span>
</div>
<div class="k5"></div>
<div class="k">
<div class="k1">第一块</div>
<div class="k2">第二块</div>
<div class="k3">第三块</div>
<div class="k4">第四块</div>
</div>
</body>
<script type="text/javascript">
var t1 = document.getElementsByClassName('t1')[0];
var t2 = document.getElementsByClassName('t2')[0];
var t3 = document.getElementsByClassName('t3')[0];
var t4 = document.getElementsByClassName('t4')[0];
var k1 = document.getElementsByClassName('k1')[0];
var k2 = document.getElementsByClassName('k2')[0];
var k3 = document.getElementsByClassName('k3')[0];
var k4 = document.getElementsByClassName('k4')[0];
var k5 = document.getElementsByClassName('k5')[0];
t1.onclick = function () {
k5.style.display = "none";
k1.style.display = "block";
k2.style.display = "none";
k3.style.display = "none";
k4.style.display = "none";
}
t2.onclick = function () {
k5.style.display = "none";
k2.style.display = "block";
k1.style.display = "none";
k3.style.display = "none";
k4.style.display = "none";
}
t3.onclick = function () {
k5.style.display = "none";
k3.style.display = "block";
k1.style.display = "none";
k2.style.display = "none";
k4.style.display = "none";
}
t4.onclick = function () {
k5.style.display = "none";
k4.style.display = "block";
k1.style.display = "none";
k2.style.display = "none";
k3.style.display = "none";
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
background-color: yellow;
padding-left: 20px;
padding-right: 20px;
}
.k div {
background-color: green;
text-align: center;
line-height: 220px;
width: 220px;
height: 220px;
display: none;
}
.k .k1{
background-color:red;
}
.k .k2{
background-color: pink;
}
.k .k3{
background-color: purple;
}
.k5{
width: 220px;
height: 220px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span class="t1">1</span>
<span class="t2">2</span>
<span class="t3">3</span>
<span class="t4">4</span>
</div>
<div class="k5"></div>
<div class="k">
<div class="k1">第一块</div>
<div class="k2">第二块</div>
<div class="k3">第三块</div>
<div class="k4">第四块</div>
</div>
</body>
<script type="text/javascript">
var t1 = document.getElementsByClassName('t1')[0];
var t2 = document.getElementsByClassName('t2')[0];
var t3 = document.getElementsByClassName('t3')[0];
var t4 = document.getElementsByClassName('t4')[0];
var k1 = document.getElementsByClassName('k1')[0];
var k2 = document.getElementsByClassName('k2')[0];
var k3 = document.getElementsByClassName('k3')[0];
var k4 = document.getElementsByClassName('k4')[0];
var k5 = document.getElementsByClassName('k5')[0];
t1.onclick = function () {
k5.style.display = "none";
k1.style.display = "block";
k2.style.display = "none";
k3.style.display = "none";
k4.style.display = "none";
}
t2.onclick = function () {
k5.style.display = "none";
k2.style.display = "block";
k1.style.display = "none";
k3.style.display = "none";
k4.style.display = "none";
}
t3.onclick = function () {
k5.style.display = "none";
k3.style.display = "block";
k1.style.display = "none";
k2.style.display = "none";
k4.style.display = "none";
}
t4.onclick = function () {
k5.style.display = "none";
k4.style.display = "block";
k1.style.display = "none";
k2.style.display = "none";
k3.style.display = "none";
}
</script>
</html>