代码： html 页面小效果 （集合，待补充）

Posted 2020-07-19 21270

 

标签切换（下部内容区跟着切换）：　　2016-6-2

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(‘.res-head .btn‘).click(function(){
        $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
        var idx = $(this).index();
        $(‘.res-body .res-con‘).eq(idx).addClass(‘active‘).siblings().removeClass(‘active‘);
    });
});
</script>
<style type="text/css">
.clearfix:after{display:block;content:‘‘;height:0;overflow:hidden;clear:both;}
.res-head{margin:0 auto;width:244px;}
.res-head .btn{display:block;float:left;width:120px;height:34px;line-height:34px;font-size:14px;text-align:center;color:#333;border:1px solid #ccc;cursor:pointer;}
.res-head .btn.active{background:#ff7200;color:#fff;border:1px solid #ff7200;}
.res-head .btn-base{border-right:none!important;}
.res-head .btn-fine{border-left:none!important;}
.res-body .res-con{display:none;}
.res-body .res-con.active{display:block;}
</style>
<div class="res-head clearfix">
    <a class="btn btn-base active">简装</a>
    <a class="btn btn-fine">精装</a>
</div>
<div class="res-body clearfix">
    <div class="res-con active">
        内容区域111111
    </div>
    <div class="res-con">
        内容区域22222
    </div>
</div>

 

 

 

 

待补充...