jquery Frage über "dieses"

Question

Ich habe diesen JavaScript-Code:

<script type="text/javascript"> 
     $(document).ready(function(){ 
      //Set the selector in the first tab 
      $("#blokken .links .tabmenu span:first",this).addClass("selector"); 


      //Basic hover action 
      $(".links .tabmenu span").mouseover(function(){ 
       $(this).addClass("hovering"); 
      }); 
      $(".links .tabmenu span").mouseout(function(){ 
       $(this).removeClass("hovering"); 
      });    

      //Add click action to tab menu 
      $(".links .tabmenu span",this).click(function(){ 
       //Remove the exist selector 
       $(".selector").removeClass("selector"); 
       //Add the selector class to the sender 
       $(this).addClass("selector"); 

       //Find the width of a tab 
       var TabWidth = $(".TabContent:first").width(); 
       if(parseInt($(".TabContent:first").css("margin-left")) > 0) 
        TabWidth += parseInt($(".TabContent:first").css("margin-left")); 
       if(parseInt($(".TabContent:first").css("margin-right")) >0) 
        TabWidth += parseInt($(".TabContent:first").css("margin-right")); 
       //But wait, how far we slide to? Let find out 
       var newLeft = -1* $("span").index(this) * TabWidth; 
       //Ok, now slide 
       $(".AllTabs").animate({ 
        left: + newLeft + "px" 
       },1000); 
      }); 
     }); 
    </script> 

und ich habe die html

<div class="links"> 
        <div class="tabmenu">   
         <span class="managementmodellen">Managementmodellen</span> 
         <span class="cursus">Cursus</span> 
         <span class="apps">Apps</span> 
        </div> 

        <div class="ContentFrame"> 
         <div class="AllTabs"> 
          <div class="TabContent"> 
           <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" /> 
           <p><strong>Timemanagement</strong> 
            Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
            ter hand te nemen, vooral als het omvangrijke klussen zijn. 
           </p> 
          </div> 
          <div class="TabContent"> 
           <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" /> 
           <p><strong>Timemanagement</strong> 
            Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
            ter hand te nemen, vooral als het omvangrijke klussen zijn. 
           </p> 
          </div> 
          <div class="TabContent"> 
           <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" /> 
           <p><strong>Timemanagement</strong> 
            Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
            ter hand te nemen, vooral als het omvangrijke klussen zijn. 
           </p> 
          </div> 
         </div> 
        </div> 
       </div> 

Ich habe jetzt eine jquery Registerkarte Konstruktion. Aber nein, ich möchte zwei oder mehr Tabs auf der Website. Als ich auf der Website platzierte, zwei Tabs. Also ich möchte zwei stellen aber wenn ich zwei tabs (div class = links) auf der website platziert. Als die Tabs funktioniert nicht gut. Als ich auf die Zwei-Tab-Konstruktion geklickt habe. Der erste Tab geht auch.

Wie kann ich das beheben? Das kann mehr als 1 auf 1 Seite machen. Diese

Answer 1

ist keine direkte Antwort, aber Sie sollten mit vorhandenen Lösungen wie http://jqueryui.com/demos/tabs/

berücksichtigen oder Plugin verwenden, zB: http://plugins.jquery.com/project/SmartTab

ps. Ich kenne die weel neu zu erfinden macht Spaß - ich mache es mir viel :)

Answer 2

<script type="text/javascript"> 
     $(document).ready(function(){ 
      //Set the selector in the first tab 
      $("#blokken .links .tabmenu span:first",this).addClass("selector"); 


      //Basic hover action 
      $(".links .tabmenu span").mouseover(function(){ 
       $(this).addClass("hovering"); 
      }); 
      $(".links .tabmenu span").mouseout(function(){ 
       $(this).removeClass("hovering"); 
      });    

      //Add click action to tab menu 
      $(".links .tabmenu span",this).click(function(){ 
       // save THIS tab construction selector 
       var thisTabs=$(this).closest(".link"); 
       //Remove the exist selector 
       thisTabs.find(".selector").removeClass("selector"); 
       //Add the selector class to the sender 
       $(this).addClass("selector"); 

       //Find the width of a tab 
       var TabWidth = thisTabs.find(".TabContent:first").width(); 
       if(parseInt(thisTabs.find(".TabContent:first").css("margin-left")) > 0) 
        TabWidth += parseInt(thisTabs.find(".TabContent:first").css("margin-left")); 
       if(parseInt(thisTabs.find(".TabContent:first").css("margin-right")) >0) 
        TabWidth += parseInt(thisTabs.find(".TabContent:first").css("margin-right")); 
       //But wait, how far we slide to? Let find out 
       // i really dont understand this line 
       var newLeft = -1* thisTabs.find("span").index(this) * TabWidth; 
       //Ok, now slide 
       thisTabs.find(".AllTabs").animate({ 
        left: + newLeft + "px" 
       },1000); 
      }); 
     }); 
    </script> 

Equal mein Rat ist, die weel sry für mich Englisch