Question

这看起来很愚蠢，但我无法解决这个问题：

我有3个自制标签，我用jquery show（）和hide（）切换它们。有线的是，这个代码适用于2个选项卡，但是当我插入第3个选项卡时，第3个选项卡onClick不起作用。

工作代码.js

function readyFn( jQuery ) {

    $("#t1").click(function() {
        $("#tab1").show();
        $("#tab2").hide();              
    })
    $("#t2").click(function() {
        $("#tab1").hide();
        $("#tab2").show();              
    })
}

$( document ).ready( readyFn );

当我为第三个标签添加代码时，此标签不起作用（但其他2个标签与之前相同）。

function readyFn( jQuery ) {

    $("#t1").click(function() {
        $("#tab1").show();
        $("#tab2").hide();
        $("#tab3").hide();              
    })
    $("#t2").click(function() {
        $("#tab1").hide();
        $("#tab2").show();
        $("#tab3").hide();              
    })
    $("#t3").click(function() {
        $("#tab1").hide();
        $("#tab2").hide();
        $("#tab3").show();              
    })
}

$( document ).ready( readyFn );

html：

<body>  
        <section class="main-info" role="main">
            <div class="wrap">              

                <!--------------------- main  -------------------- -->                                  
                <div class="main-info-con" id="tab1">               
                    <h2 >tab1</h2>                          
                </div>                  
                <div class="main-info-con" id="tab2">               
                    <h2 >tab2</h2>                                          
                </div>
                <div class="main-info-con" id="tab3">               
                    <h2 >tab3</h2>                                          
                </div>  
                <!-- ------------------ tabs --------------------- -->
                <div class="main-info-tabs">               
                    <div id="t1">
                        <h4> najnowsze standardy.</h4>
                    </div>
                    <div id="t2">
                        <h4> profesjonalna wspólpraca.</h4>
                    </div>
                    <div id="tab-kontakt">
                    <h4>kontakt</h4>
                    </div>
                </div>                  
            </div>
        </section>          
</body>

这里有什么不妥？

Answer 1

将<div id="tab-kontakt">更改为<div id="t3">

检查代码

＆＃13;

  $(document).ready(function() {
    $("#t1").click(function() {
      $("#tab1").show();
      $("#tab2").hide();
      $("#tab3").hide();
    });
    $("#t2").click(function() {
      $("#tab1").hide();
      $("#tab2").show();
      $("#tab3").hide();
    });
    $("#t3").click(function() {
      $("#tab1").hide();
      $("#tab2").hide();
      $("#tab3").show();
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main-info" role="main">
  <div class="wrap">

    <!--------------------- main  -------------------- -->
    <div class="main-info-con" id="tab1">
      <h2>tab1</h2>
    </div>
    <div class="main-info-con" id="tab2">
      <h2>tab2</h2>
    </div>
    <div class="main-info-con" id="tab3">
      <h2>tab3</h2>
    </div>
    <!-- ------------------ tabs --------------------- -->
    <div class="main-info-tabs">
      <div id="t1">
        <h4> najnowsze standardy.</h4>
      </div>
      <div id="t2">
        <h4> profesjonalna wspólpraca.</h4>
      </div>
      <div id="t3">
        <h4>kontakt</h4>
      </div>
    </div>
  </div>
</section>

＆＃13;

带有jquery的基本选项卡，切换不在2个选项卡上工作

1 个答案: