5.gif

css

.tl-tag{
    width:80px;
    height:30px;
    line-height: 30px;
    background:#E5E5E5;
    border-radius:15px;
    text-align: center;
    margin-left: 20px;
    color: #666666;
}
.tl-tag-active{
    width:80px;
    height:30px;
    line-height: 30px;
    background:#FB633C !important;
    border-radius:15px;
    text-align: center;
    margin-left: 20px;
    color: #FFFFFF !important;
}
.pull_l {
    float: left;
}

html

<div class="clearfix">
    <div class="tl-tag pull_l" onclick="select(this);">短信分类</div>
    <div class="tl-tag tl-tag-active pull_l" onclick="select(this);">高级版</div>
    <div class="tl-tag pull_l" onclick="select(this);">服务类</div>
</div>

js

function select(e, title, price){
   // $(e).addClass("tl-tag-active").siblings("div").removeClass("tl-tag-active");
    $(e).addClass("tl-tag-active").siblings("div").removeClass("tl-tag-active");
    $(e).children(".sel").show(0).parent().siblings().children(".sel").hide(0);
}