THIS IS ONLY A TESTWIKI! LH, MW 1.39.7, PHP 8, SMW 4.1.3

Bootstrap-Test/Tabs: Unterschied zwischen den Versionen

Aus Test
Zur Navigation springen Zur Suche springen
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 13: Zeile 13:
<h2>DEMO WH</h2>
<h2>DEMO WH</h2>


<ul class="nav nav-tabs" id="myTab" role="tablist">
<ul class="nav nav-tabs">
  <li class="nav-item" role="presentation">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  </li>
     <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  <li class="nav-item" role="presentation">
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
     <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </ul>
  </li>
 
  <li class="nav-item" role="presentation">
  <div class="tab-content">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    <div id="home" class="tab-pane fade in active">
  </li>
      <h3>HOME</h3>
</ul>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="tab-content" id="myTabContent">
    </div>
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div id="menu1" class="tab-pane fade">
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
      <h3>Menu 1</h3>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
    </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>

Version vom 23. Oktober 2023, 14:58 Uhr

Home content...
Profile content...
Contact...


DEMO WH

  • <a data-toggle="tab" href="#home">Home</a>
  • <a data-toggle="tab" href="#menu1">Menu 1</a>
  • <a data-toggle="tab" href="#menu2">Menu 2</a>
  • <a data-toggle="tab" href="#menu3">Menu 3</a>

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Abgerufen von „https://test.knowledge.wiki/index.php?title=Bootstrap-Test/Tabs&oldid=10930“