gelöst Problem beim Erstellen von Content mit TAB's

Thema wurde von Anonymous, 30. November 2017 erstellt.

  1. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    Moin Leute

    ich möchte gerne meinen Content für AGB ändern, so dass er aus mehreren TAB's besteht und in diesen dann die AGB in versch. Sprachen zu sehen ist.

    Habe dazu auch was gefunden und den Test-Code mal eingebaut; aber leider passiert bei mir nichts beim Klick auf die anderen TAB's. Bei der Testseite wo ich den Code herhabe, funktioniert es :(.

    Was ist falsch bei mir? Jemand eine Idee?
    Die Javascripts von Bootstrap sind doch alle im Shop vorhanden?!

    Hier mein Test-Code:

    Code:
    <div class="responsive">
      <h2>Dynamic Tabs</h2>
      <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
    
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
      </ul>
    
      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>HOME</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Menu 1</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Menu 3</h3>
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
    </div>
    Hier der Link wo es den Code gibt:
    (Link nur für registrierte Nutzer sichtbar.)

    Hier noch der Link zu meinem Testshop: (Link nur für registrierte Nutzer sichtbar.)
     
  2. Sergej (Gambio)
    Sergej (Gambio) Erfahrener Benutzer
    Mitarbeiter
    Registriert seit:
    1. August 2016
    Beiträge:
    336
    Danke erhalten:
    205
    Danke vergeben:
    69
    Ne leider nicht - auf manchen Seiten muss man bootstrap.js bzw. bootstrap.min.js einbinden.
     
  3. Anonymous
    Anonymous Administrator
    Mitarbeiter
    Registriert seit:
    26. April 2011
    Beiträge:
    1.954
    Danke erhalten:
    1.588
    Danke vergeben:
    339
    Hi, es reicht dem übergeordneten HTML Element noch das Attribut data-gambio-widget="tabs" zu geben. Damit wird das JavaScript für die Tabs dynmaisch nachgeladen und es sind keine Extra Bootstrap JavaScripte nötig.
     
  4. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    Super, das war's. Danke.