<style type="text/css">
span {
display: inline-block;
}
.input_output_records_content_top{
width: 97.5%;
height: 50px;
border-bottom: 1px solid #ccc;
padding-left: 25px;
}
.input_output_records_content_top span {
width: 115px;
border: 1px solid #ccc;
border-radius: 3px;
margin: 15px 0px;
text-align: center;
height: 34px;
line-height: 35px;
cursor: pointer;
background: white;
border-bottom: none;
position: relative;
}
.input_output_records_content_hide{
display:none;
width:100%;height:350px;text-align:center;line-height:350px
}
.input_output_records_content_show{
display:block;
}
.select {
color: #1890FF;
font-weight: bold;
height: 35px !important;
}
</style>
<div class="input_output_records_content" style="height:470px;padding:20px;width: 500px;border: 1px solid black;margin:0px auto;">
<div class="input_output_records_content_top">
<span class="select" onclick="input_output_records_content_title(this);">入库记录
</span>
<span onclick="input_output_records_content_title(this);" class="">出库记录
</span>
<span onclick="input_output_records_content_title(this);" class="">所有记录
</span>
</div>
<div class=" input_output_records_content_hide input_output_records_content_show" >
<h1>我是入库记录主要内容</h1>
</div>
<div class="input_output_records_content_hide" >
<h1>我是出库记录主要内容</h1>
</div>
<div class="input_output_records_content_hide">
<h1>我是所有记录主要内容</h1>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
function input_output_records_content_title(thiss){
var titles = $('.input_output_records_content_top span');
var contents = $('.input_output_records_content_hide');
for(var i=0;i<titles.length;i++){
if(titles[i]==thiss){
$(titles[i]).addClass("select");
contents.eq(i).addClass("input_output_records_content_show")
}else{
$(titles[i]).removeClass("select");
contents.eq(i).removeClass("input_output_records_content_show")
}
}
}
</script>
Tab切换 ,css是重点
猜你喜欢
转载自blog.csdn.net/sugang666/article/details/84998294
今日推荐
周排行