<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Test
</title>
<style type="text/css">
body{
margin:0;
}
.tab{
width:100%;
position:absolute;
bottom:0;
margin:0;
list-style: none;
background-color: #eee;
overflow: hidden;
padding-left: 0px;
}
.tab li{
float: left;
width: 50%;
height: 60px;
line-height: 60px;
text-align: center;
}
.tab li.cur {
border: none;
color: #c40001;
margin-left: 0;
background-color: #fff;
border-top: 3px solid #c40001;
}
.tabCon{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="tabCons">
<div class="tabCon">
内容1
</div>
<div class="tabCon" style="display:none;
">
内容2
</div>
</div>
<!--页单-->
<ul id="tab" class="tab">
<li class="cur">NFC标签扫描
</li>
<li>标签编号查询
</li>
</ul>
</body>
<script type="text/javascript" src="../third-party/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/**
* 页单切换
*/
$(".tab li").click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
$("#tabCons .tabCon").hide().eq($(this).index()).show();
});
</script>
</html>
转载请注明原文地址: https://ju.6miu.com/read-21751.html
