Question

我有3个div和3个按钮。在页面加载时，应该只有第一个div可见。点击按钮＆＃34; step1＆＃34;，＆＃34; step2＆＃34;，＆＃34; step3＆＃34;应该出现div1 div2和div3。但是其中唯一一个应该始终可见，其余部分必须隐藏。我编写了以下代码，但不幸的是，无论我点击什么，第一个div始终是visibe。为什么？的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="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>

隐藏/显示按钮不隐藏我的div

2 个答案: