<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<style>
.aa{
0;
border-bottom:20px solid transparent;
border-right:20px solid transparent;
border-left:20px solid transparent;
border-top:20px solid green;
}
.aa:hover{
0px;
border-bottom:20px solid transparent;
border-right:20px solid transparent;
border-left:20px solid transparent;
border-top:20px solid green;
transform:rotate(180deg);
transition:all 0.5s ease;
}
.all{
position:relative;
508px;
}
.wrap_left{
margin:0 auto;
100px;
height:auto;
position:relative;
border:1px solid yellow;
border-right:none;
}
.a1,.a3,.a5,.a7{
100px;
height:61px;
background:cornflowerblue;
cursor:pointer;
border:1px solid red;
display:block;
position:relative;
margin-top:-14px;
border-radius:0 0 0 20px;
z-index:1;
border-right:none;
}
.a2,.a4,.a6,.a8{
position:relative;
120px;
height:81px;
background:lightgray:
display:none;
margin-left:-18px;
margin-top:-14px;
border-radius:20px 0 0 20px;
z-index:3;
border-right:none;
}
.a2{
background:chocolate;
}
.a4{
background:plum;
}
.a6{
background:wheat;
}
.a8{
background:yellowgreen;
}
.aa1{
color:white;
text-align:center;
font-size:large;
font-weight:bold;
left:32px;
height:20px;
line-height:20px;
position:absolute;
top:16px;
}
.right{
200px;
height:226px;
border:1px solid darkgray;
display:none;
position:absolute;
top:-13px;
right:0px;
color:white;
border-left:none;
}
.right1{
background:chocolate;
}
.right2{
background:plum;
}
.right3{
background:wheat;
}
.right4{
background:yellowgreen;
}
.s1{
position:absolute;
top:17px;
left:40px;
font-weight:bolder;
font-size:30px;
color:white;
}
.s2{
position:absolute;
top:17px;
left:49px;
font-weight:bolder;
font-size:49px;
color:white;
}
.s3{
position:absolute;
bottom:5px;
right:21px;
font-weight:bolder;
font-size:35px;
color:white;
}
</style>
</head>
<body>
<div class='aa'></div>
<div class='all'>
<div class='wrap_left'>
<div class='a1 gi'>
<span class='aa1'>3/1</span>
</div>
<div class='a2 hi'>
<span class='s1'>3</span>
<span class='s2'>/</span>
<span class='s3'>1<span>
</div>
<div class='a3 gi'>
<span class='aa1'>2/28</span>
</div>
<div class='a4 hi'>
<span class='s1'>2</span>
<span class='s2'>/</span>
<span class='s3'>28<span>
</div>
<div class='a5 gi'>
<span class='aa1'>2/20</span>
</div>
<div class='a6 hi'>
<span class='s1'>2</span>
<span class='s2'>/</span>
<span class='s3'>20<span>
</div>
<div class='a7 gi'>
<span class='aa1'>2/15</span>
</div>
<div class='a8 hi'>
<span class='s1'>2</span>
<span class='s2'>/</span>
<span class='s3'>15<span>
</div>
</div>
<div class='right right1'>right1</div>
<div class='right right2'>right2</div>
<div class='right right3'>right3</div>
<div class='right right4'>right4</div>
</div>
<script>
$(document).ready(function(){
$('.hi').hide();
$('.gi').show();
$('.a1').hide();
$('.a2').show();
$('.right').hide();
$('.right1').show();
});
$('.wrap_left .a1').on('click',function(){
$('.hi').hide();
$('.gi').show();
$('.a1').hide();
$('.a2').show();
$('.right').hide();
$('.right1').show();
})
$('.wrap_left .a3').on('click',function(){
$('.hi').hide();
$('.gi').show();
$('.a3').hide();
$('.a4').show();
$('.right').hide();
$('.right1').show();
})
$('.wrap_left .a5').on('click',function(){
$('.hi').hide();
$('.gi').show();
$('.a5').hide();
$('.a6').show();
$('.right1').hide();
$('.right3').show();
})
$('.wrap_left .a7').on('click',function(){
$('.hi').hide();
$('.gi').show();
$('.a7').hide();
$('.a8').show();
$('.right').hide();
$('.right4').show();
})
</script>
</body>
</html>