js:
$(function(){
$(".lt_btll input").click(function(){
$(this).addClass("bt_active").siblings().removeClass("bt_active");
var idName = $(this).attr("id");
$("#" + idName + "_" + "con").show().siblings(".lt_btll_div").hide();
});
});
html:
<div class="lt_btll">
<input class="bt_it bt_active" value="1" type="button" id="lt_btll_it1"/>
<input class="bt_it" value="2" type="button" id="lt_btll_it2"/>
<input class="bt_it" value="3" type="button" id="lt_btll_it3"/>
<input class="bt_it" value=4" type="button" id="lt_btll_it4"/>
</div>
<div id="lt_btll_it1_con" class="lt_btll_div">
1
</div>
<div id="lt_btll_it2_con" class="lt_btll_div" style="display: none;">
2
</div>
<div id="lt_btll_it3_con" class="lt_btll_div" style="display: none;">
3
</div>
<div id="lt_btll_it4_con" class="lt_btll_div" style="display: none;">
4
</div>
css:
.bt_it {
padding: 5px 10px 3px;
border: 1px solid #E8E8E8;
background-color: #FFFFFF;
border-radius: 8px;
text-align: center;
text-decoration: none;
outline: none;
margin-left: 10px;
}
.bt_active {
background-color: #009ee0;
border: 1px solid #009ee0;
color: #FFFFFF;
}