web-dev-qa-db-fra.com

Bootstrap onglets dans les onglets

J'utilise Bootstrap 2.3.2 avec Joomla. J'ai un ensemble d'onglets de navigation et le contenu de chaque onglet est assez volumineux. Certaines sections de cet onglet doivent être dupliqué sur un ou plusieurs des autres onglets. Ce contenu répété contient un autre ensemble d'onglets de navigation. Je souhaite stocker ce contenu répété dans un module HTML personnalisé, de sorte que je n'ai qu'à en conserver une copie. Un problème, en ce sens que seule la première occurrence du jeu d'enfants de sous-onglets est fonctionnelle, car le navigateur voit deux ou plus du même identifiant sur la page.

<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>
navigation
2
Kris Hunt

Je vois tout de suite le problème. Le problème est que vous vous embrouillez avec les identifiants, ce qui est compréhensible car je peux imaginer que vous avez beaucoup d'onglets et de contenu.

Pour le réduire, vous utilisez essentiellement le même ID à plusieurs endroits, ce qui signifie qu'il y aura des conflits.

Donc, en le regardant du point de vue du code, dans les sous-onglets en vous 3ème onglet , vous utilisiez l'ID de 1er onglet 

<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>

Comme vous pouvez le constater dans le code ci-dessus, vous assignez et appelez tab1-1, alors que, comme cela est déjà utilisé, il devrait être tab3-1.

Voici un JSFiddle mis à jour avec le code de travail:

https://jsfiddle.net/tak0cuf1/

J'espère que cela t'aides

1
Lodder

onglets à l'intérieur des onglets:

<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