barre de navigation Bootstrap

Bonjour !

J'ai tenté de réaliser un formulaire d'inscription à l'aide de Bootstrap. La page est composée d'une barre de navigation et deux petit formulaires. Chaque onglet de la barre doit afficher un de ces deux formulaire.

Le problème est le suivant : les onglets ne fonctionnent qu'une fois. C'est à dire qu'ils se "bloquent", je ne peux plus naviguer entre les formulaires à partir du moment où j'ai déjà cliqué une fois sur les onglets.

Malgré mes recherches (documentation Bootstrap et autres) je ne trouve pas mon erreur, si quelqu'un peut m'aiguiller...

Je joins mes scripts html et css (qui ne sont que des ébauches) :

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href= "style7.css" rel ="stylesheet">
    <title> Formulaire </title>
  </head>
  
  
  <body>
   
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#nav-home" role="tab" data-toggle="tab">Inscription</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#nav-profile" data-toggle="tab" role="tab">Votre identité</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#nav-contact" data-toggle="tab" role="tab">Vos coordonnées</a>
          </li>
        </ul>
      </div>
    </nav>
    
    <div class="tab-content" id="nav-tabContent">
      
      <div class="tab-pane active text-center" id="nav-home" role="tabpanel">
        <p> </p>
        <h1> Bienvenue</h1>
        <p>Procédez à votre inscription en un clic !</p>
        <a class="btn btn-lg btn-outline-primary" href="#monform1">Commencer</a>
      </div>
      
      <div class="tab-pane" id="nav-profile" role="tabpanel">
        <form id="monform1">
          <div class="col-md-6 mb-2, bloc">
            <p>Prénom</p>
            <input type ="text" id="prenom">
            <p id="e1"></p>
            <p>Nom</p>
            <input type ="text" id="nom">
            <p id="e2"></p>
            <p>Téléphone</p>
            <input type ="text" id="tel">
            <p id="e3"></p>        
            <p>Age</p>
            <input type ="text" id="age">
            <p id="e4"></p>
          </div>
        </form>
      </div>
      
      <div class="tab-pane" id="nav-contact" role="tabpanel">
        <form id="monform2">
          <div class="col-md-6 mb-2, bloc">
            <p>Email</p>
            <input type ="text" id="email">
            <p id="e5"></p>
            <p>Adresse</p>
            <input type ="text" id="adresse">
            <p id="e6"></p>
            <p>Pays</p>
            <select name="pays" size="1">
              <option>-- Choisir un pays -- </option>
              <option>France</option>
              <option>Pays UE</option>
              <option>Pays hors UE</option>
            </select>
            <p>Code Postal</p>
            <input type ="text" id="cp">
            <p id="e7"></p>
          </div>
        </form>
      </div>
      
    </div>
    
    <footer class="container-fluid border-top text-muted">
        <p class="float-right">&copy; Bootstrap</p>
        <p>MG</p>
        <p>@gmail.com</p>
    </footer>
    
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">  </script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"> </script> 
 
  </body>
</html>

Feuille css :

.bloc {
  background-color : #f2f3f4;
  border:solid  #797d7f 1px ;
  padding:10px;
  margin:10px;

  border-radius: 8px;

}

p {
  font-family: "arial";
  font-size:12pt;
}


body {
  background-color :#f2f3f4;
}

header {
  background-color : #d7dbdd;
  border:solid #808b96 2px ;
  padding:30px;
  margin:30px;
  border-radius: 5px;


  text-align: center;
  font-family: "arial";
  font-size:18pt; 
  font-weight: bold
}


h2 {
  background-color : #f2f3f4;
  width : 90px;
  margin-left : 50px;
  margin-top: -20px;
  text-align:justify;
  font-family: "arial";
  font-size:10pt;
}

h3 {
  background-color : #f2f3f4;
  width : 120px;
  margin-left : 50px;
  margin-top: -20px;
  text-align:justify;
  font-family: "arial";
  font-size:10pt;
}

footer {
  position: absolute;
  bottom: 0;

}

#gauche {
  float:left;
  margin-left:2%;
  width: 40%;
}

#droite {
  float:right;
  margin-right:2%;
  width: 40%;
}


#e1, #e2, #e3, #e4, #e5, #e6, #e7{
  font-family: "arial";
  font-size:10pt; 
  color : red;
}

-
Edité par AbcAbc6 21 mars 2020 à 18:40:59

Onglets inactifs

barre de navigation Bootstrap

Supprimer

Modérer

Signaler le message aux modérateurs