您的位置:首页 > 其它

移动设备自定义面板切换

2016-03-08 20:23 260 查看
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;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: