<style>
.tab-menu {
overflow: hidden;
height: 3em;
background-color: white;
}
.tab-menu ul {
overflow: hidden;
list-style: none;
padding-left: 0px
}
.tab-menu li {
font-size: 1.2em;
text-align: center;
display: block;
width: 49%;
float: left
}
ul li:first-Child {
border-right: 2px solid #EFEFF4;
}
.tab-box div {
display: none;
}
.tab-box div:first-Child {
display: block;
}
.change {
color: #FF6600;
}
</style>
<div class="tab">
<div class="tab-menu">
<ul>
<li class="change">可用</li>
<li>历史</li>
</ul>
</div>
<div class="tab-box">
<div> 123</div>
<div>456</div>
<div>789</div>
</div>
</div>
<script type="text/javascript" src="../../assets/sbv2/js/jquery.min.js"></script>
<script>var app = new Framework7();</script>
<script>
$().ready(function () {
$(".tab-menu li").click(function () {
//通过 .index()方法获取元素下标,从0开始,赋值给某个变量
var _index = $(this).index();
//让内容框的第 _index 个显示出来,其他的被隐藏
$(".tab-box>div").eq(_index).show().siblings().hide();
//改变选中时候的选项框的样式,移除其他几个选项的样式
$(this).addClass("change").siblings().removeClass("change");
});
});
</script>