Показать класс вкладки после нажатия jquery / javascript

Question

Привет, ребята. Я новичок в JS, я добавил ползунок со вкладкой к своему HTML в меню вкладок. У меня есть 3 категории: Все, Креатив и Брендинг, как я могу показать div после нажатия на одну из кнопок li?Я добавил классы в 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>

Answer 1

Мне не ясно, каков ваш вопрос, надеюсь, это то, что вы ищете

$('.all').click(function(e){
$('.hide').removeClass('hide')
})

$('.creative').click(function(e){
$('.photo').removeClass('hide')
$('.photo2').addClass('hide')
})

$('.branding').click(function(e){
$('.photo2').removeClass('hide')
$('.photo').addClass('hide')
})

.hide
{
display:none

}

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

</ul>

<div class="photo hide" id="photo" >
  <img src="img/icon2.png"/>
</div>
<div class="photo2 hide" id="photo2" >
  <img src="img/icon3.png"/>
</div>

</div>

Answer 2

Вы можете скрыть / показать базу изображений на ClassName:

$('.container3 li').click(function(e){
 let className = $(this).attr('class');
 if(className == "all"){ //if all tab pressed
    $("#portfolio-gallery .photo").show(200);
  }else{
    $("#portfolio-gallery .photo").hide();
    $("#portfolio-gallery .photo."+className).show(200);
  }
})

<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>
       </ul>

    <div id="portfolio-gallery">
     <div class="photo creative" >
       <img src="img/icon2.png"/>
     </div>
     <div class="photo branding" >
       <img src="img/icon3.png"/>
     </div>
     <div class="photo branding" >
       <img src="img/icon2.png"/>
     </div>
     <div class="photo branding" >
       <img src="img/icon3.png"/>
     </div>
    </div>

 </div>

Answer 3

Захватите класс выделенного элемента и затем покажите / спрячьте div на его основе.

<script type="text/javascript">
$(document).ready(function(){

$("ul li").click(function(e) {


var currentClass = $(this).attr('class');

if(currentClass == "all") {
  $("#photo").css("display","block");
} else if (currentClass == "creative") {
  $("#photo2").css("display","block");
}



// 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>