自适应的tab菜单栏

代码部分：

Css代码:
*{
　　margin:0px;
　　padding:0px;
　　font-size:62.5%;
}
body{
　　background-color:#FFFFFF;
}
.zw-test-title{
　　display:table;
　　margin:0 auto;
　　background:#FFFFFF;
　　width:100%;
　　border:1px #999999;
　　border-style:solid none solid none;
　　line-height:4.5rem;
}
.zw-test-title ul{
　　display:table-row-group;
}
.zw-test-title li{
　　display:table-cell;
　　list-style:none;
　　text-align:center;
　　background:url(images/vertical_bar.png) no-repeat right;
　　background-size:0.5rem 4rem;
}

.zw-test-title li a{
　　font-size:1.5rem;
　　padding-bottom:1.5rem;
}

.zw-test-title li:last-child{
　　background:none!important;
}

.zw-choose-red{
　　border-bottom:3px solid red;
　　color: #000000;
}

.zw-choose-white{
　　color:#8F8F94;
}

Html代码：
<div class="zw-test-title">
　　<ul>
　　　　<li><a href="#" class="zw-choose-red">本周最佳新人导师</a></li>
　　　　<li><a href="#" class="zw-choose-white">本周有价值导师</a></li>
　　　　<li><a href="#" class="zw-choose-white">本周最佳</a></li>
　　</ul>
</div>

Jquery代码：

<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.0.0.min.js" ></script>
<script>
$(function(){
　　mui.init({});
　　mui('.zw-test-title').on('tap', 'a', function () {
　　$(this).addClass("zw-choose-red").removeClass("zw-choose-white");
　　$(this).parents("li").siblings("li").find("a").addClass("zw-choose-white").removeClass("zw-choose-red");
});

});
</script>

效果图：