it-swarm.com.de

Bootstrap Tabs innerhalb von Tabs

Ich verwende Bootstrap 2.3.2 mit Joomla. Ich habe eine Reihe von Navigationsregisterkarten und der Inhalt in jeder Registerkarte ist ziemlich umfangreich. Es gibt einige Abschnitte innerhalb einer bestimmten Registerkarte, die benötigt werden auf einer oder mehreren der anderen Registerkarten dupliziert werden. Dieser wiederholte Inhalt enthält einen weiteren Satz von Navigationsregistern. Ich möchte diesen wiederholten Inhalt in einem benutzerdefinierten HTML-Modul speichern, damit ich nur eine Kopie davon pflegen muss Ein Problem ist, dass nur das erste Vorkommen der untergeordneten Gruppe von Navigationsregistern funktioniert, da der Browser zwei oder mehr der gleichen ID auf der Seite sieht.

<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/Twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script src="https://maxcdn.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js" type="text/javascript"></script>

        <style type="text/css">
            body {background-color: #DDD}
            .container {background-color: white; padding: 20px}
        </style>
    </head>
        <div class="container">

        <ul class="nav nav-pills">
          <li><a href="#tab1" data-toggle="tab">One</a></li>
          <li><a href="#tab2" data-toggle="tab">Two</a></li>
          <li><a href="#tab3" data-toggle="tab">Three</a></li>
        </ul>

        <div class="tab-content" style="margin-bottom:50px">
            <div class="tab-pane fade active in" id="tab1">
                <p>This is the content for tab 1.</p>

                <ul class="nav nav-pills">
                  <li><a href="#tab1-1" data-toggle="tab">Subtab One</a></li>
                  <li><a href="#tab1-2" data-toggle="tab">Subtab Two</a></li>
                  <li><a href="#tab1-3" data-toggle="tab">Subtab Three</a></li>
                </ul>

                <div class="tab-content" style="margin-bottom:50px">
                    <div class="tab-pane fade active in" id="tab1-1">This is the content for subtab 1.</div>
                    <div class="tab-pane fade" id="tab1-2">This is the content for subtab 2.</div>
                    <div class="tab-pane fade" id="tab1-3">This is the content for subtab 3.</div>
                </div>

            </div>
            <div class="tab-pane fade" id="tab2"><p>This is the content for tab 2.</p></div>
            <div class="tab-pane fade" id="tab3">
                <p>This is the content for tab 3.</p>

                <ul class="nav nav-pills">
                  <li><a href="#tab1-1" data-toggle="tab">Subtab One</a></li>
                  <li><a href="#tab1-2" data-toggle="tab">Subtab Two</a></li>
                  <li><a href="#tab1-3" data-toggle="tab">Subtab Three</a></li>
                </ul>

                <div class="tab-content" style="margin-bottom:50px">
                    <div class="tab-pane fade active in" id="tab1-1">This is the content for subtab 1.</div>
                    <div class="tab-pane fade" id="tab1-2">This is the content for subtab 2.</div>
                    <div class="tab-pane fade" id="tab1-3">This is the content for subtab 3.</div>
                </div>
            </div>
        </div>

</html>
2
Kris Hunt

Ich sehe das Problem sofort. Das Problem ist, dass Sie mit den IDs durcheinander geraten, was verständlich ist, da ich mir vorstellen kann, dass Sie viele Tabs und Inhalte haben.

Um dies einzugrenzen, verwenden Sie im Grunde dieselbe ID an mehreren Stellen, was bedeutet, dass es zu Konflikten kommen wird.

Wenn Sie es also aus einer Code-Perspektive betrachten, haben Sie in Unterregistern in Ihrem 3. Tab die ID aus dem verwendet. 1. Tab

<div class="tab-pane fade" id="tab3">
    <p>This is the content for tab 3.</p>

    <ul class="nav nav-pills">
      <li><a href="#tab1-1" data-toggle="tab">Subtab One</a></li>
      <li><a href="#tab1-2" data-toggle="tab">Subtab Two</a></li>
      <li><a href="#tab1-3" data-toggle="tab">Subtab Three</a></li>
    </ul>

    <div class="tab-content" style="margin-bottom:50px">
        <div class="tab-pane fade active in" id="tab1-1">This is the content for subtab 1.</div>
        <div class="tab-pane fade" id="tab1-2">This is the content for subtab 2.</div>
        <div class="tab-pane fade" id="tab1-3">This is the content for subtab 3.</div>
    </div>
</div>

Wie Sie im obigen Code sehen können, weisen Sie tab1-1 Zu und rufen es auf. Da dies bereits verwendet wird, sollte es tab3-1 Sein.

Hier ist eine aktualisierte JSFiddle mit dem Arbeitscode:

https://jsfiddle.net/tak0cuf1/

Hoffe das hilft

1
Lodder

tabs in Tabs:

<ul>
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>

<div class="tab-content">

    <div class="tab-pane active" id="tab1">
        <p>Text 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>Text 2.</p>
        <div>

            <ul>
                <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
                <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
            </ul>

            <div class="tab-content">

                <div class="tab-pane active" id="tab3">
                    <p>Text 3.</p>
                </div>
                <div class="tab-pane" id="tab4">
                    <p>Text 4.</p>
                </div>
            </div>

        </div>
    </div>
</div>
0
Artem Sidovski