jquery + Click the button to switch the content div, buttons to highlight

 

 

html:

<div class="dw4">
<span class="dw">单位（次）</span>
<div class="time4">
<div class="dat day active4">a</div>
<div class="dat month">b</div>
</div>
</div>

<div class = "tabinners4">
<div class = "inner4">
    I am the first content oh
</ div>

<div class = "inner4">
I was the second content ah

</div>

</div>

 

 

css:

.dw4{
position: relative;
}
.time4{
position: absolute;
right:6px;
top:2px;
}
.time4 .dat{
width: 55px;
height: 20px;
display: inline-block;
/* float: right; */
color: #fff;
font-size: 12px;
background: url(../image/l4.png) no-repeat;
padding-left: 11px;
padding-top: 1px;
cursor: pointer;
}

.dw4 .active4{

background: url(../image/h4.png) no-repeat;
cursor: pointer;
width: 55px;
}
.tabinners4 .inner4:first-child{
display: block;
}

.inner4{
width: 370px;
height: 209px;
background: url(../image/kuang4aa.png) no-repeat;
position: relative;
display: none;
margin-top: 12px;
}

 

js:

$(".time4 .dat").click(function(){
$(this).addClass('active4').siblings().removeClass('active4');
var index=$(this).index();
$(".tabinners4 .inner4").eq(index).show().siblings().hide();
})