单击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>