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

Question

大家好，我完全是 JS 的初学者，我在选项卡菜单中的 html 中添加了选项卡 slider ，我有 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>

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>