Grund Tabs mit jquery, Schalt arbeitet nicht mehr als 2 Tabs

Dies scheint dumm, aber ich kann nicht herausfinden:Grund Tabs mit jquery, Schalt arbeitet nicht mehr als 2 Tabs

Ich habe 3 selbst gemacht Tabs bekam, und ich sie mit jquery zeigen Schale () und verstecken(). Die verdrahtete Sache ist, dieser Code funktioniert für 2 Tabs, aber wenn ich 3. Tab einlege, funktioniert der 3. Tab onClick nicht.

Arbeits code.js

function readyFn(jQuery) { 

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

$(document).ready(readyFn);

und wenn ich den Code für dritte Registerkarte hinzufügen, wird dieser Registerkarte nicht funktioniert (aber die anderen 2 tut wie vor).

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>

was hier falsch sein kann?

Quelle

2016-06-20 linearSpin

ändern <div id="tab-kontakt"> zu <div id="t3">

Überprüfen Sie den Code

$(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(); 
 
    }); 
 
    });

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

Quelle

2016-06-20 09:36:12 zakhefron

Grund Tabs mit jquery, Schalt arbeitet nicht mehr als 2 Tabs

Antwort

Verwandte Themen