Tabs Bootstrap dans Modal Bootstrap

ksta
Javascript

Bonjour,

Je suis débutant avec bootstrap et je suis confronté à un problème :(

j'ai un modal qui apparait lors d'un clique sur un icon et dans se modal j'ai un Tab .Donc jusque la sa va mais je ne peut plus revenir sur le premier onglet si je clique sur le deuxième onglet :( je suis obligé de réactualisé la page :(

Je n'arrive pas a comprendre car dans la même page j'ai un Tab qui marche correctement (il n'est pas dans un modal celui-ci).

code HTML :

<div class="modal hide fade" id="myModal" style="width: 600px;">
                /*
                *   Header du Modal
                */
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    </div>
                /*
                *   Content du Modal
                */
    <div class="modal-body">
        <ul class="nav nav-tabs" id="TabModal">
            <li><a href="#onglet1" data-toggle="tab">Onglet 1</a></li>
        <li><a href="#onglet2" data-toggle="tab">Onglet 2</a></li>
    </ul>
                /*
                *   Content du Tab
                *
                */
        <div id="TabModalContent" class="tab-content">
        // Onglet 1
        <div class="tab-pane active" id="onglet1">
        <h3>Onglet 1</h3>
        </div>
        // Onglet 2
        <div class="tab-pane" id="onglet2">
        <h3>Onglet 2</h3>   
        </div>
        </div>  
    </div>          
                /*
                *   Footer du Modal
                */
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save</a>
    </div>
</div>

code jQuery : 

$('#TabModal a:first').tab('show');
$('#TabModal a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

Si quelqu'un pourrai m’aider à comprendre je le remercie d'avance :-)

WebMaster Junior chez 123plantes

4 réponses

s4p
Réponse acceptée 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js" type="text/javascript"></script>
        <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
        <script type="text/javascript">
            $(document).ready(function(){
                $('.modal').addClass('in');
                $('#TabModal a:first').tab('show');
            });
        </script>
    </head>
    <body>

        <div class="modal fade" id="myModal" style="width: 600px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Modal</h3>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" id="TabModal">
                    <li><a href="#onglet1" data-toggle="tab">Onglet 1</a></li>
                    <li><a href="#onglet2" data-toggle="tab">Onglet 2</a></li>
                </ul>
                <div id="TabModalContent" class="tab-content">
                    <div class="tab-pane fade in active" id="onglet1">
                        <h3>Onglet 1</h3>
                    </div>
                    <div class="tab-pane fade" id="onglet2">
                        <h3>Onglet 2</h3>  
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
                <a href="#" class="btn btn-primary">Save</a>
            </div>
        </div>
    </body>
</html>
ksta
Auteur

Bonjour s4p,

Merci beaucoup pour ton aide :) sa marche nikel :).
Par contre il faut ajouter à la ligne 32

<li class="active">
        <a href="#onglet1" data-toggle="tab">Onglet 1</a>
    </li>

pour qu'il affiche le contenue car pour ma part le contenue était vide mais pourtant présent dans fireBug :)

Par contre si sa te dérange pas serait il possible de m'expliquer car je ne comprend pas en quoi le faite de rajouter la class in change quelquechose? :(

merci encor pour ton aide :)

WebMaster Junior chez 123plantes

s4p

j'ai rajouté le in pour les animations, ça ne marchait pas sinon.

ksta
Auteur

Ha ok :) en tous cas merci de ton aide :)