前端经常用到的切换

切换：

经常用到的切换

css:

<style type="text/css">
    .box{width:100%;height:auto;margin:0 auto;}
    .box ul{list-style: none;display: block;width:1200px;height: auto;margin:0 auto;}
    .box li{float: left;}
    .box li{
        display: inline-block;width:200px;height:40px;
        text-align: center;line-height: 40px;
        text-decoration: none;
        font-size: 20px;color: coral;
        border:1px solid #666666;
        border-radius: 50px;
        margin:20px;
    }
    .on{background-color:pink;color:#fff;}
    .box-txt{width:600px;height:400px;border:1px solid #666666;clear: both;}
    .txt{width:100%;height:100%;overflow:hidden;display: none;}
</style>

html:

<div class="box">
    <ul class="tab">
        <li class="on"><a href="JavaScript:void(0)">风景美如画</a></li>
        <li><a href="JavaScript:void(0)">一枝红杏出墙来</a></li>
        <li><a href="JavaScript:void(0)">浅草才能没马蹄</a></li>
    </ul>
</div>
<div class="box-txt">
    <div class="txt" style="display: block;">
        昨夜小楼又东风
    </div>
    <div class="txt">
       2 昨夜小楼又东风
    </div>
    <div class="txt">
       3 昨夜小楼又东风
    </div>
</div>

jq:

<script type="text/javascript">
   $(function () {
           $(".tab li").each(function (index,element) {
               $(this).hover(function () {
                   $(this).addClass('on').siblings().removeClass('on');
                   window.onresize;
                   //快速切换
                   // $(".box-txt").css("right","20px").animate({right:"74px"},600);
                   $(".box-txt>div").eq(index).show('fast').siblings().hide('fast');
                   //减隐切换
                   // $(".box-txt>div").eq(index).show('slow').siblings().hide('slow');
                   //切换   类似第2种
                   // $(".box-txt>div").eq(index).show(500).siblings().hide(500);
                   //同上
                   // $(".box-txt>div").eq(index).show(200).siblings().hide(300);
               })
           })
       })
</script>

类似手风琴的切换：

<div id="firstpane" class="menu_list">
    <div class="menu_head on">
        <span>文案策划</span>
        <span>2人</span>
        <span>济宁市</span>
        <span>2018-01-15</span>
        <a href="javascript:;"></a>
    </div>
    <div style="display:block" class="menu_body">
        <span>职位要求：</span>
        <span>工作职责：</span>
        <span>1、根据公司发展战略，协助上级领导制订详细的品牌推广计划；</span>
        <span>2、策划、推进大型品牌推广活动的开展，协调部门资源，保证品牌推广 活动顺利进行；</span>
        <span> 3、根据整体宣传方案，独立撰写策划方案、公关炒作稿、官方新闻、企业活动等稿件；</span>
        <span>4、对于公司内部优秀事迹的报道。</span>
        <span>任职要求：</span>
        <span>  1、本科以上学历、广告或营销策划相关专业；</span>
        <span> 2、文案能力较强、对于公众号的运营新颖有创意；</span>
        <span> 3、会使用PS、AI等设计软件</span>
        <a href="javascript:void(0)">投递简历</a>
    </div>
    <div class="menu_head">
        <span>项目经理</span>
        <span>4人</span>
        <span>济宁市</span>
        <span>2018-01-15</span>
        <a href="javascript:;"></a>
    </div>
    <div style="display:none" class="menu_body">
        <span>职位要求：</span>
        <span>工作职责：</span>
        <span>1、根据公司发展战略，协助上级领导制订详细的品牌推广计划；</span>
        <span>2、策划、推进大型品牌推广活动的开展，协调部门资源，保证品牌推广 活动顺利进行；</span>
        <span> 3、根据整体宣传方案，独立撰写策划方案、公关炒作稿、官方新闻、企业活动等稿件；</span>
        <span>4、对于公司内部优秀事迹的报道。</span>
        <span>任职要求：</span>
        <span>  1、本科以上学历、广告或营销策划相关专业；</span>
        <span> 2、文案能力较强、对于公众号的运营新颖有创意；</span>
        <span> 3、会使用PS、AI等设计软件</span>
        <a href="javascript:void(0)">投递简历</a>
    </div></div>

js:

$(document).ready(function() {
    $("#firstpane .menu_body:eq(0)").show();
    $("#firstpane div.menu_head").click(function() {
        $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).addClass("on").siblings().removeClass("on");
    });
});