单击jquery / javascript后显示选项卡类

Question

我是JS的初学者，我在标签菜单的html中添加了标签滑块，我将其分为3类：全部，创意和品牌，单击li之一后如何显示div？我已将类添加到li并为图像创建了2个div，但是下一步该怎么做？这是一些代码。$(document).ready(function(){$("ul li").click(function(e) {  // make sure we cannot click the slider  if ($(this).hasClass('slider')) {    return;  }  /* Add the slider movement */  // what tab was pressed  var whatTab = $(this).index();  // Work out how far the slider needs to go  var howFar = 160 * whatTab;  $(".slider").css({    left: howFar + "px"  });  /* Add the ripple */  // Remove olds ones  $(".ripple").remove();  // Setup  var posX = $(this).offset().left,      posY = $(this).offset().top,      buttonWidth = $(this).width(),      buttonHeight = $(this).height();  // Add the element  $(this).prepend("<span class='ripple'></span>");  // Make it round!  if (buttonWidth >= buttonHeight) {    buttonHeight = buttonWidth;  } else {    buttonWidth = buttonHeight;  }  // Get the center of the element  var x = e.pageX - posX - buttonWidth / 2;  var y = e.pageY - posY - buttonHeight / 2;  // Add the ripples CSS and start the animation  $(".ripple").css({    width: buttonWidth,    height: buttonHeight,    top: y + 'px',    left: x + 'px'  }).addClass("rippleEffect");});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container3">        <h1>OUR PORTFOLIO</h1>        <p>Lorem ipsum lorem exciting          ipsum lore portfolio</p>          <div class="portfolio">            <ul>      <li class="all">All</li>      <li class="creative">Creative</li>      <li class ="branding">Branding</li>      <li class="slider"></li>    </ul>    <div class="photo" id="photo"style="display:none">      <img src="img/icon2.png"/>    </div>    <div class="photo2" id="photo2"style="display:none">      <img src="img/icon3.png"/>    </div>    </div>