Jquery Tabs mehrfach

joker_joker

Grünschnabel
Hallo Leute nach lange Zeit schau ich mal wieder hier im Forum vorbei und würde mich freuen wenn Ihr mir kurz helfen könntet. Die Suchfunktion habe ich schon benutz aber gerade nichts passendes gefunden.


hier mal mein Code
HTML:
<div class="container">
  <ul class="tabs">
  <li class="tab-link current" data-tab="tab-$ID-1">Auftragsinfo</li>
  <li class="tab-link" data-tab="tab-$ID-2">Käufer / Verkäufer</li>
  <li class="tab-link" data-tab="tab-$ID-3">Halter</li>
  <li class="tab-link" data-tab="tab-$ID-4">Daten</li>
  <li class="tab-link" data-tab="tab-$ID-5">Dokumente</li>
  </ul>

  <div id="tab-$ID-1" class="tab-content active">
  Lorem ipsum ....
  </div>
  <div id="tab-$ID-2" class="tab-content">
  Duis aute ....
  </div>
  <div id="tab-$ID-3" class="tab-content">
  Lorem ipsum ........
  </div>
  <div id="tab-$ID-4" class="tab-content">
  Sed do eiusmod ....
  </div>
  <div id="tab-$ID-5" class="tab-content">
  Se magna aliqua. ....
  </div>
</div>

Javascript:
$(document).ready(function(){
 
   $('ul.tabs li').click(function(){
     var tab_id = $(this).attr('data-tab');

     Um diese Stelle dreht es sich
     $('ul.tabs li').removeClass('active');
     $('.tab-content').removeClass('active');

     $(this).addClass('active');
     $("#"+tab_id).addClass('active');
   })
})

Ich habe dieses Tabmenü mehrfach auf einer Seite im Einstatz also so ca 20mal nun wollte ich durch die Variable $ID der Datensäte aus der Datenbank das ganze dazu bringen mehrfach auf der Seite zu funktionieren. Nun wie schon oben im Code zu sehen ist, werden hier die Klassen aller div zurückgesetzt und nicht nur die bestimmten des Datensatzes mit der gleichen $ID.

Leider stelle ich mich gerade etwas dumm an und wäre für eine Hilfestellung sehr dankbar.
 
Zuletzt bearbeitet:
Hallo hoffentlich haben wir uns da jetzt nicht falsch verstanden. Die $ID's sind meine Nummern aus der Datenbank z.B.

HTML:
<div class="container">
  <ul class="tabs">
  <li class="tab-link current" data-tab="tab-1002-1">Auftragsinfo</li>
  <li class="tab-link" data-tab="tab-1002-2">Käufer / Verkäufer</li>
  <li class="tab-link" data-tab="tab-1002-3">Halter</li>
  <li class="tab-link" data-tab="tab-1002-4">Daten</li>
  <li class="tab-link" data-tab="tab-1002-5">Dokumente</li>
  </ul>
  <div id="tab-1002-1" class="tab-content active">
  Lorem ipsum ....
  </div>
  <div id="tab-1002-2" class="tab-content">
  Duis aute ....
  </div>
  <div id="tab-1002-3" class="tab-content">
  Lorem ipsum ........
  </div>
  <div id="tab-1002-4" class="tab-content">
  Sed do eiusmod ....
  </div>
  <div id="tab-1002-5" class="tab-content">
  Se magna aliqua. ....
  </div>
</div>

der nächste Datensatz aus der DB...

HTML:
<div class="container">
  <ul class="tabs">
  <li class="tab-link current" data-tab="tab-1003-1">Auftragsinfo</li>
  <li class="tab-link" data-tab="tab-1003-2">Käufer / Verkäufer</li>
  <li class="tab-link" data-tab="tab-1003-3">Halter</li>
  <li class="tab-link" data-tab="tab-1003-4">Daten</li>
  <li class="tab-link" data-tab="tab-1003-5">Dokumente</li>
  </ul>

  <div id="tab-1003-1" class="tab-content active">
  Lorem ipsum ....
  </div>
  <div id="tab-1003-2" class="tab-content">
  Duis aute ....
  </div>
  <div id="tab-1003-3" class="tab-content">
  Lorem ipsum ........
  </div>
  <div id="tab-1003-4" class="tab-content">
  Sed do eiusmod ....
  </div>
  <div id="tab-1003-5" class="tab-content">
  Se magna aliqua. ....
  </div>
</div>

usw....

Also $ID ist hie nur meine ID aus der Datenbank um hier bei der Ausgabe einer Schleife eindeutig zuordnen zu können
 
Ach so, das ist PHP. Hast Du denn den Fehler beheben können? Bei mir funktioniert es nämlich einwandfrei mit dem HTML, das Du zuletzt gepostet hast.
 

Neue Beiträge

Zurück