Bootstrap 4 Navs la liste déroulante Problème

Im développer des Navs formes pour mes projets universitaires, Im utilisé pour [email protected] , Ceci est mon problème, im sélectionné Book item navs travaille après im sélectionné enfant items and again click the article Organais` après plusieurs Navs détails des éléments, vous pouvez le vérifier im joint mon code dans jsfiddle. s'il vous plaît regarder mon code https://jsfiddle.net/9qsacmr4/4/Bootstrap 4 Navs la liste déroulante Problème

regard sur l'image affichée im une ligne de couleur rouge dans mon numéro Merci

Source

2017-09-26 core114

Cette question est extrêmement difficile à lire et à comprendre, s'il vous plaît corriger la mise en forme. Aussi, au lieu de partager le code complet, recréer une version minimale avec votre problème et l'afficher dans la question au lieu de 'jsfiddle' –

@BrianH. monsieur regarder im attaché l'image – core114

Questions demandant l'aide de code doit inclure le plus court code nécessaire pour le reproduire ** dans la question elle-même ** de préférence dans un [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introduction-runnable-javascript-css-et-html-code-snippets /). –

On dirait que votre code a trop répété id. L'attribut id doit être unique. J'ai renommé certains de vos ID répétés avec numéro. et retiré indésirables </div>

inputState ->inputState2 et inputState3

Vérifier mise à jour jsFiddle

EDIT: contenu du formulaire avec le texte statique Remplacée.

EDIT 2: travailler avec les 3 formes

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="content-wrapper"> 
 
    <div class="container-fluid"> 
 
    
 
    <!-- section-two--> 
 
    <div class="agrarian-section-addnewaccount" style="margin-top: -0.5rem;"> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <ul class="nav nav-tabs" id="myTab" role="tablist"> 
 
      <li class="nav-item dropdown"> 
 
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Select Your Account Type </a> 
 
       <div class="dropdown-menu"> 
 
       <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">Book</a> 
 
       <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">Organais</a> 
 
       <a class="dropdown-item" id="pills-dropdown3-tab" href="#pills-dropdown3" role="tab" data-toggle="pill" aria-controls="pills-dropdown3">Child</a> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
      
 
      <!-- tab section--> 
 
      <div class="tab-content" id="myTabContent"> 
 
      <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">    
 
       <!-- tab section head-->    
 
       <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <ol class="breadcrumb"> 
 
        <li class="breadcrumb-item"> 
 
         <p class="WD-txt-hd">Individual Account</p> 
 
        </li> 
 
        </ol> 
 
       </div> 
 
       </div>    
 
       <!-- tab section head-->    
 
       <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <div class="card"> 
 
        <form> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputAccNum" class="col-form-label">Account Number</label> 
 
          <input type="text" class="form-control" id="inputAccNum" placeholder="Account Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputGivName" class="col-form-label">Given Name</label> 
 
          <input type="text" class="form-control" id="inputGivName" placeholder="Given Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSurName" class="col-form-label">Sure Name</label> 
 
          <input type="text" class="form-control" id="inputSurName" placeholder="Sure Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOthName" class="col-form-label">Other Name</label> 
 
          <input type="text" class="form-control" id="inputOthName" placeholder="Other Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputInd-DOB" class="col-form-label">Date of Birth</label> 
 
          <div class="input-group input-append date" id="datePicker-IndDOB" > 
 
          <input type="text" class="form-control" name="date" value="" placeholder="DOB" /> 
 
          <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputGENDER" class="col-form-label">Gender</label> 
 
          <br> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="radio1" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="radio2" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputNIC" class="col-form-label">NIC </label> 
 
          <input type="text" class="form-control" id="inputNIC" placeholder="NIC"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputADD" class="col-form-label">Residential Address</label> 
 
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="1" placeholder="Address"></textarea> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputCity" class="col-form-label">City</label> 
 
          <input type="text" class="form-control" id="inputCity"> 
 
         </div> 
 
         <div class="form-group col-md-4"> 
 
          <label for="inputState" class="col-form-label">State</label> 
 
          <select id="inputState" class="form-control"> 
 
          <option selected>Select your state</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         <div class="form-group col-md-2"> 
 
          <label for="inputZip" class="col-form-label">Zip</label> 
 
          <input type="text" class="form-control" id="inputZip"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputMobile" class="col-form-label">Mobile</label> 
 
          <input type="text" class="form-control" id="inputMobile" placeholder="Mobile"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputTeli" class="col-form-label">Teliphone</label> 
 
          <input type="text" class="form-control" id="inputTeli" placeholder="Teliphone"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSrvCentre" class="col-form-label">Services Centre</label> 
 
          <select id="inputStatetwo" class="form-control"> 
 
          <option selected>Select your Services Centre</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
         <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button> 
 
        </form> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab"> 
 
       <!-- tab section head--> 
 
      <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <ol class="breadcrumb"> 
 
        <li class="breadcrumb-item active"> 
 
         <p class="WD-txt-hd">Organaisational Account</p> 
 
        </li> 
 
        </ol> 
 
       </div> 
 
       </div> 
 
       
 
       <!-- tab section head--> 
 
       
 
       <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <div class="card"> 
 
        <form> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgAccNum" class="col-form-label">Account Number</label> 
 
          <input type="text" class="form-control" id="inputOrgAccNum" placeholder="Account Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgName" class="col-form-label">Organisation Name</label> 
 
          <input type="text" class="form-control" id="inputOrgName" placeholder="Organisation Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgOpenerName" class="col-form-label">Account Opener Name</label> 
 
          <input type="text" class="form-control" id="inputOrgOpenerName" placeholder="Account Opener Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgOpenrMobile" class="col-form-label">Account Opener Mobile</label> 
 
          <input type="text" class="form-control" id="inputOrgOpenrMobile" placeholder="Account Opener Mobile"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgDOB" class="col-form-label">Organisation Started Date</label> 
 
          <div class="input-group input-append date" id="datePicker-OrgDOB" > 
 
          <input type="text" class="form-control" name="date" value="" placeholder="Organisation Started Date" /> 
 
          <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgStatus" class="col-form-label">Organisation Status</label> 
 
          <input type="text" class="form-control" id="inputOrgStatus" placeholder="Organisation Status"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgRegNumber" class="col-form-label">Organisation Reg: Number </label> 
 
          <input type="text" class="form-control" id="inputOrgRegNumber" placeholder="Organisation Reg: Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgADD" class="col-form-label">Organisation Address</label> 
 
          <textarea class="form-control" id="OrgADD" rows="1" placeholder="Organisation Address"></textarea> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputCity" class="col-form-label">City</label> 
 
          <input type="text" class="form-control" id="inputCity2"> 
 
         </div> 
 
         <div class="form-group col-md-4"> 
 
          <label for="inputState2" class="col-form-label">State</label> 
 
          <select id="inputState2" class="form-control"> 
 
          <option selected>Select your state</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         <div class="form-group col-md-2"> 
 
          <label for="inputZip" class="col-form-label"> Zip </label> 
 
          <input type="text" class="form-control" id="inputZip" /> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOegEmail" class="col-form-label"> Organisation Email </label> 
 
          <input type="email" class="form-control" id="inputOrgEmail" placeholder="Organisation Email"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgTeli" class="col-form-label"> Teliphone </label> 
 
          <input type="text" class="form-control" id="inputOrgTeli" placeholder="Organisation Teliphone"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSrvCentre" class="col-form-label"> Services Centre </label> 
 
          <select id="inputStatetwo2" class="form-control"> 
 
          <option selected>Select your Services Centre</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
         <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button> 
 
        </form> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="tab-pane fade" id="pills-dropdown3" role="tabpanel" aria-labelledby="pills-dropdown3-tab"> 
 
       
 
      <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <ol class="breadcrumb"> 
 
        <li class="breadcrumb-item active"> 
 
         <p class="WD-txt-hd">Children Account</p> 
 
        </li> 
 
        </ol> 
 
       </div> 
 
       </div> 
 
       
 
      <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <div class="card"> 
 
        <form> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgAccNum" class="col-form-label">Account Number</label> 
 
          <input type="text" class="form-control" id="inputOrgAccNum2" placeholder="Account Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildGivName" class="col-form-label">Given Name</label> 
 
          <input type="text" class="form-control" id="inputChildGivName" placeholder="Given Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildOpenerName" class="col-form-label">Sure Name</label> 
 
          <input type="text" class="form-control" id="inputChildOpenerName" placeholder="Sure Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildOpenrOther" class="col-form-label">Other Name</label> 
 
          <input type="text" class="form-control" id="inputChildOpenrOther" placeholder="Other Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildDOB" class="col-form-label">Date Of Birth</label> 
 
          <div class="input-group input-append date" id="datePicker-ChildDOB" > 
 
          <input type="text" class="form-control" name="date" value="" placeholder="DOB" /> 
 
          <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildGENDER" class="col-form-label">Gender</label> 
 
          <br> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="Childradio1" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="Childradio2" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildADD" class="col-form-label">Residential Address</label> 
 
          <textarea class="form-control" id="ChildADD" rows="1" placeholder="Residential Address"></textarea> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputCity" class="col-form-label">City</label> 
 
          <input type="text" class="form-control" id="inputCity3"> 
 
         </div> 
 
         <div class="form-group col-md-4"> 
 
          <label for="inputState3" class="col-form-label">State</label> 
 
          <select id="inputState3" class="form-control"> 
 
          <option selected>Select your state</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         <div class="form-group col-md-2"> 
 
          <label for="inputZip" class="col-form-label">Zip</label> 
 
          <input type="text" class="form-control" id="inputZip2"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildMobie" class="col-form-label">Mobile</label> 
 
          <input type="Text" class="form-control" id="inputChildMobile" placeholder="Mobile"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildTeli" class="col-form-label">Teliphone</label> 
 
          <input type="text" class="form-control" id="inputChildTeli" placeholder="Teliphone"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildGuardianName" class="col-form-label">Guardian Name</label> 
 
          <input type="text" class="form-control" id="inputChildGuardianName" placeholder="Guardian Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSrvCentre2" class="col-form-label">Services Centre</label> 
 
          <select id="inputStatetwoe2" class="form-control"> 
 
          <option selected>Select your Services Centre</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
         <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button> 
 
        </form> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       
 
      </div> 
 
      </div> 
 
      
 
      <!-- /tab section--> 
 
      
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-09-26 10:51:45

Monsieur êtes-vous sûr que son fonctionnement en ce moment? s'il vous plaît pouvez-vous le vérifier, d'abord cliquez sur le troisième élément déroulant après cliquez sur le 2ème élément, vous pouvez voir ses répétées – core114

corriger mon violon tenir sur @ core114 –

monsieur votre violon lien ne fonctionne pas – core114

Essayez cette

Ajouter un script J-query et ajoutez java script puis ajoutez select box for drop down. select box drop down valeur définie main form div class. exemple: <select> <option value="book">Book</option> </select><div class="book box"> Formulaire Put Ici

Cocher cette lien ci-dessous

Exemple - https://jsfiddle.net/DEVPIYUSH/98rb0xsf/

Source

2017-09-26 12:03:17

monsieur, s'il vous plaît donnez-moi une petite description, qu'est-ce que vous avez changé – core114

Ajouter le script Jquery et ajouter javascript, puis ajouter la boîte de sélection pour la liste déroulante. sélectionnez la zone de liste déroulante définissez la forme principale div class. exemple:

Put Form Here

–

Bootstrap 4 Navs la liste déroulante Problème

Répondre

Questions connexes