I can not make tabs with pictures

function ImageTabs() { var WrapGalary = $(".galary_wrap"); var MenuGalary = WrapGalary.find(".galary_menu>li"); var ContentGalary = WrapGalary.find(".img_content_all"); ContentGalary.not(":first").hide(); MenuGalary.each(function(i) { $(this).attr("data-type", "tab" + i); }); ContentGalary.each(function(i) { $(this).attr("data-type", "tab" + i); }); MenuGalary.click(function() { var getWrapGalary = $(this).closest(".galary_wrap"); var dataTab = $(this).attr("data-type"); getWrapGalary.find(".galary_menu>li").removeClass("active"); $(this).find("li").addClass("active"); getWrapGalary.find(ContentGalary).hide(); getWrapGalary.find(ContentGalary).filter("[data-type=" + dataTab + "]").show(); }); } ImageTabs(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="galary_wrap"> <div class="row"> <div class="col-lg-12"> <div class="slider_menu"> <ul class="galary_menu"> <li>All /</li> <li>entertaiment /</li> <li>sport /</li> <li>bussnnes /</li> <li>bulding</li> </ul> </div> </div> </div> <div class="galary_content"> <div class="row"> <!-- <div class="block_1">--> <div class="col-lg-6"> <div class="img_content_all"> <img src="../Shablon_16/image/slide_1.png" width="458px" height="200px" alt="Slide" class="sport"> <div class="mask_1"> <div class="plus"></div> </div> </div> </div> <div class="col-lg-3"> <div class="img_content_all"> <img src="../Shablon_16/image/slide_2.png" alt="Slide" width="222px" height="200px" class="all"> <div class="mask_2"> <div class="plus"></div> </div> </div> </div> <div class="col-lg-3"> <div class="img_content_all"> <img src="../Shablon_16/image/slide_3.png" alt="Slide" width="235px" height="200px" class="all buss"> <div class="mask_3"> <div class="plus"></div> </div> </div> </div> <!-- </div>--> </div> <div class="row"> <!-- <div class="block_2">--> <div class="col-lg-3"> <div class="img_content_all"> <img src="../Shablon_16/image/slide_4.png" width="217px" height="200px" alt="Slide" class="bulding"> <div class="mask_4"> <div class="plus"></div> </div> </div> </div> <div class="col-lg-3"> <div class="img_content_all"> <img src="../Shablon_16/image/slide_5.png" alt="Slide" width="230px" height="200px" class="enterteiment"> <div class="mask_5"> <div class="plus"></div> </div> </div> </div> <div class="col-lg-6"> <div class="img_content_all"> <img src="../Shablon_16/image/slide_6.png" alt="Slide" width="469px" height="200px" class="busnis"> <div class="mask_6"> <div class="plus"></div> </div> </div> </div> <!-- </div>--> </div> </div> </div>