Hide/show 按钮没有隐藏我的 div

Question

我有 3 个 div 和 3 个按钮。在页面加载时，应该只有第一个 div 可见。单击按钮 "step1"、"step2"、"step3" 时，应该会出现 div1 div2 和 div3。但其中只有一个应该始终可见，其余的必须隐藏。我写了下面的代码，但不幸的是第一个 div 总是可见的，无论我点击什么。为什么？分区：

<div class="videoDiv">
    <img src="/images/Karolina_GFX/play_button.png" class='videoImage'><br>
    <a href="#!"><div class='buttonImage'><p id="germanText">Geschäftspräsentation</p></div></a>
    <button class="changeVideoButton1">Step1</button>
    <button class="changeVideoButton2">Step2</button>
    <button class="changeVideoButton3">Step3</button>
</div>



<div class="videoDiv2">
    <img src="/images/Karolina_GFX/play_button.png" class='videoImage2'><br>
    <a href="#!"><div class='buttonImage'><p id="germanText">The Company</p></div></a>
    <button class="changeVideoButton1">Step1</button>
    <button class="changeVideoButton2">Step2</button>
    <button class="changeVideoButton3">Step3</button>
</div>


<div class="videoDiv3">
    <img src="/images/Karolina_GFX/play_button.png" class='videoImage3'><br>
    <a href="#!"><div class='buttonImage'><p id="germanText">was ist zu tun?</p></div></a>
    <button class="changeVideoButton1">Step1</button>
    <button class="changeVideoButton2">Step2</button>
    <button class="changeVideoButton3">Step3</button>
</div>

js:

<script>
    $(".videoDiv1.videoDiv2, .videoDiv3").hide();

      $(".changeVideoButton1").click(function(){
          $(".videoDiv2,.videoDiv3").hide();
          $(".videoDiv1").show();
    });

      $(".changeVideoButton2").click(function(){
          $(".videoDiv1,.videoDiv3").hide();
          $(".videoDiv2").show();
    });

      $(".changeVideoButton3").click(function(){
          $(".videoDiv1,.videoDiv2").hide();
          $(".videoDiv3").show();
    });
</script>

Answer 1

改变这个：

$(".videoDiv1").show();

对此：

$(".videoDiv").show();

只需从所有 .videoDiv1

中删除 1

Answer 2

改变第一个div的class

来自

<div class="videoDiv">

至

<div class="videoDiv1">

Answer 3

<div class="videoDiv1">
 <img src="/images/Karolina_GFX/play_button.png" class='videoImage'><br>
 <a href="#!"><div class='buttonImage'><p id="germanText">Geschäftspräsentation</p></div></a>
</div>
<div class="videoDiv2">
 <img src="/images/Karolina_GFX/play_button.png" class='videoImage2'><br>
 <a href="#!">
  <div class='buttonImage'><p id="germanText">The Company</p></div></a>    
</div>
<div class="videoDiv3">
  <img src="/images/Karolina_GFX/play_button.png" class='videoImage3'><br>
 <a href="#!"><div class='buttonImage'>
   <p id="germanText">was ist zu tun?
   </p>
  </div>
    </a>
 </div>
 <button class="changeVideoButton1">Step1</button>
 <button class="changeVideoButton2">Step2</button>
 <button class="changeVideoButton3">Step3</button>


<script type="text/javascript">
 $(".videoDiv2, .videoDiv3").hide();

 $(".changeVideoButton1").click(function(){
    $(".videoDiv2, .videoDiv3").hide();
    $(".videoDiv1").show();
 });

 $(".changeVideoButton2").click(function(){
    $(".videoDiv1, .videoDiv3").hide();
    $(".videoDiv2").show();
 });

 $(".changeVideoButton3").click(function(){
   $(".videoDiv2, .videoDiv1").hide();
    $(".videoDiv3").show();
 });
</script>

Hide/show 按钮没有隐藏我的 div

Hide/show buttons are not hiding my div

javascript

css

jquery

show