js按钮切换

function loadEvent(){
    $(".JS_tabTit li,.JS_tabTit a").on("click",function(e) {
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(".JS_tabTit li,.JS_tabTit a").index(this);
        $(".JS_tabCon").eq(index).show().siblings().hide();
    });
    $(".aptitudeStyle li img").each(function() {
        $(this).click(function() {
            var src = $(this).attr('src');

            $("body").append('<div class="browseImg"></div>','<div class="bodyBg"></div>');
            $(".browseImg").append("<img id='slin' width='150' height='186' src='"+src+"'/>");
            $("body").css("overflow","hidden");

            $(".bodyBg").click(function() {
                $(".browseImg").html("");
                $("body").css("overflow","");
                $(".browseImg,.bodyBg").remove();
            });

        });
    });
}

.browseImg {
   position: fixed;
   top: 50%;
   left: 50%;
   margin: -267px 0 0 -387px;
    714px;
   height: 494px;
   overflow: hidden;
   border: 1px solid #666666;
   background:#fff;
   padding: 20px;
   z-index: 999;
}
.browseImg span {
   position: absolute;
   top: 0;
   right: 0;
   display: block;
   background:#fff url(../images/icon/pop_close.png) no-repeat center;
    25px;
   height: 25px;
   overflow: hidden;
   cursor: pointer;
}
.browseImg img {
   100%;
   height: 100%;
}
.bodyBg {
   position: fixed;
   top:0;
   left:0;
    100%;
   height: 100%;
   background:#a0a0a0;
   filter:alpha(opacity=60);  
   -moz-opacity:0.6;  
   -khtml-opacity: 0.6;  
   opacity: 0.6; 
   z-index: 888; 
}


html 代码

<div class="aboutusRight aptitudeStyle">
	<div class="aboutusTit">
	资质风采
	</div>
	<div class="aboutusCon">
	<ul class="tabTit4 JS_tabTit">
	<li class="active">
	公司资质
	</li>
	<li>
	公司风采
	</li>
	</ul>
	<div class="tabBox">
	<ul class="JS_tabCon clearfix">
	<li>
	<span><img src="/attached/image/2015/20151211/201512110338208766.jpg" alt="" />企业法人营业执照</span>
	</li>
	<li>
	<img src="/attached/image/2015/20151211/201512110338575829.jpg" alt="" /><span>组织机构代码证</span>
	</li>
	<li>
	<img src="/attached/image/2015/20151211/201512110340348677.jpg" alt="" /><span>税务登记证</span>
	</li>
	<li>
	<img src="/attached/image/2015/20151211/201512110341295990.jpg" alt="" /><span>开户许可证</span>
	</li>
	</ul>
	<ul class="JS_tabCon clearfix" style="display:none;">
	<li>
	<img src="/new/images/front/aboutus_img11.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img12.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img13.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img4.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img14.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img15.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img16.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img17.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img18.jpg" />
	</li>
	<li>
	<img src="/new/images/front/aboutus_img19.jpg" />
	</li>
	</ul>
	</div>
	</div>
	</div></div>
	</div>
	</div>