2016-06-03 2 views
0

У меня проблема с моим сайтом. Я использую загрузочные вкладки для навигации по моему сайту. Все вкладки работают, кроме последнего. Он смешивает содержимое последнего с предыдущим. Я не кодер, поэтому я считаю, что мой код выглядит ужасно. Я скопировал и вставил с разных сайтов. Поэтому, если у вас есть улучшения, пожалуйста, дайте мне знать.загрузочные вкладки, не отображающие содержимое

The .... in the red circle should be underneath the planning tab

<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Duiklog</title> 
 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
 
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<h1>Welkom bij mijn duiklog</h1> 
 
    
 

 

 

 
    
 

 

 
<div> 
 
<!-- Nav tabs --> 
 
<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
<li role="presentation"><a href="#Duiklog" aria-controls="Duiklog" role="tab" data-toggle="tab">Duiklog</a></li> 
 
<li role="presentation"><a href="#invoer" aria-controls="invoer" role="tab" data-toggle="tab">Invoer</a></li> 
 
<li role="presentation"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">Planning</a></li> 
 

 
</ul> 
 
<!-- Tab panes --> 
 
<div class="tab-content"> 
 
<div role="tabpanel" class="tab-pane active" id="home"> 
 
<h2>Stats</h2><br> 
 

 
Aantal duiken: 2<br> 
 
Gemiddeld lucht verbruikt: 22.5000 
 

 
</div> 
 
<div role="tabpanel" class="tab-pane" id="Duiklog"> 
 
\t \t <table class="table table-hover"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     <th>Datum</th> 
 
     <th>Locatie</th> 
 
\t <th>Buddy</th> 
 
\t <th>Diepte</th> 
 
\t <th>Duiktijd</th> 
 
\t <th>Watertype</th> 
 
\t <th>Zicht</th> 
 
\t <th>Temp</th> 
 
\t <th>Duiktype</th> 
 
\t <th>Fles</th> 
 
\t <th>Druk start</th> 
 
\t <th>Druk einde</th> 
 
\t <th>Druk verbruikt</th> 
 
\t <th>Lucht verbruikt</th> 
 
\t <th>Opmerkingen</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr><td>2</td><td>2012-05-20</td><td>boschmolenplas</td><td>Harrie Wassen</td><td>11 m </td><td>39 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>200 bar </td><td>10 bar </td><td>190 bar </td><td>23ltr/min </td><td></td></tr><tr><td>1</td><td>2012-05-13</td><td>Panheel</td><td>Harrie Wassen</td><td>9 m </td><td>40 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>210 bar </td><td>40 bar </td><td>170 bar </td><td>22ltr/min </td><td>eerste duik</td></tr></table> 
 
</div> 
 
<div role="tabpanel" class="tab-pane" id="invoer"> 
 
<form action="send_post.php" method="post"> 
 

 

 
<form class="form-horizontal" role="form"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="datum">Datum:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="date" class="form-control" name="idatum" > 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="locatie">Locatie:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="ilocatie" placeholder="Voer locatie in"> 
 
    </div> 
 
\t <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="buddy">Buddy:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="ibuddy" placeholder="Voer buddy in"> 
 
    </div> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="diepte">Diepte:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="idiepte" placeholder="Voer maximale diepte in"> 
 
    </div> 
 
     <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="duiktijd">Duiktijd:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="iduiktijd" placeholder="Voer duiktijd in"> 
 
    </div> 
 
\t <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="drukstart">Drukstart:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="idrukstart" placeholder="Voer begindruk in"> 
 
    </div> 
 
\t <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="drukeinde">Drukeinde:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="idrukeinde" placeholder="Voer eindedruk in"> 
 
    </div> 
 
     <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="watertype">Watertype:</label> 
 
    <div class="col-sm-10"> 
 
     <select class="form-control" name="iwatertype"> 
 
\t <option>Zoet</option> 
 
\t <option>Zout</option> 
 
\t <option>Brak</option> 
 
    </select> 
 
    </div> 
 
     <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="zicht">Zicht:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="izicht" placeholder="Voer zicht in"> 
 
    </div> 
 
     <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="temperatuur">Temperatuur:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="itemperatuur" placeholder="Voer temperatuur in"> 
 
    </div> 
 
     <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="duiktype">Duiktype:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="iduiktype" placeholder="Voer Duiktype in"> 
 
    </div> 
 
     <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="flesvolume">Flesvolume:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="iflesvolume" placeholder="Voer flesvolume in"> 
 
    </div> 
 
     <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="opmerkingen">Opmerkingen:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="iopmerkingen" placeholder="Opmerkingen"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
</div> 
 
</div> 
 
<div role="tabpanel" class="tab-pane" id="planning"> 
 
..... 
 
</div> 
 

 

 

 
<div class="container" style="padding-bottom: 75px;"> 
 
</div> 
 
<footer class="footer"> 
 
<div class="container"> 
 
<p class="text-muted"> 
 
Connectie met duiklog

+0

Вполне вероятно, что вам не хватает закрытия где-нибудь. Я бы предложил запустить ваш HTML через валидатор. https://validator.w3.org/ – Rick

ответ

0

<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Duiklog</title> 
 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<body> 
 
<h1>Welkom bij mijn duiklog</h1> 
 
    
 

 

 

 
    
 

 

 
<div> 
 
<!-- Nav tabs --> 
 
<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
<li role="presentation"><a href="#Duiklog" aria-controls="Duiklog" role="tab" data-toggle="tab">Duiklog</a></li> 
 
<li role="presentation"><a href="#invoer" aria-controls="invoer" role="tab" data-toggle="tab">Invoer</a></li> 
 
<li role="presentation"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">Planning</a></li> 
 

 
</ul> 
 
<!-- Tab panes --> 
 
<div class="tab-content"> 
 
<div role="tabpanel" class="tab-pane active" id="home"> 
 
<h2>Stats</h2><br> 
 

 
Aantal duiken: 2<br> 
 
Gemiddeld lucht verbruikt: 22.5000 
 

 
</div> 
 
<div role="tabpanel" class="tab-pane" id="Duiklog"> 
 
\t \t <table class="table table-hover"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     <th>Datum</th> 
 
     <th>Locatie</th> 
 
\t <th>Buddy</th> 
 
\t <th>Diepte</th> 
 
\t <th>Duiktijd</th> 
 
\t <th>Watertype</th> 
 
\t <th>Zicht</th> 
 
\t <th>Temp</th> 
 
\t <th>Duiktype</th> 
 
\t <th>Fles</th> 
 
\t <th>Druk start</th> 
 
\t <th>Druk einde</th> 
 
\t <th>Druk verbruikt</th> 
 
\t <th>Lucht verbruikt</th> 
 
\t <th>Opmerkingen</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr><td>2</td><td>2012-05-20</td><td>boschmolenplas</td><td>Harrie Wassen</td><td>11 m </td><td>39 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>200 bar </td><td>10 bar </td><td>190 bar </td><td>23ltr/min </td><td></td></tr><tr><td>1</td><td>2012-05-13</td><td>Panheel</td><td>Harrie Wassen</td><td>9 m </td><td>40 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>210 bar </td><td>40 bar </td><td>170 bar </td><td>22ltr/min </td><td>eerste duik</td></tr></table> 
 
</div> 
 
<div role="tabpanel" class="tab-pane" id="invoer"> 
 
<form action="send_post.php" method="post"> 
 
    
 
<form class="form-horizontal" role="form"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="datum">Datum:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="date" class="form-control" name="idatum" > 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="locatie">Locatie:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="ilocatie" placeholder="Voer locatie in"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="buddy">Buddy:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="ibuddy" placeholder="Voer buddy in"> 
 
    </div> 
 
</div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="diepte">Diepte:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="idiepte" placeholder="Voer maximale diepte in"> 
 
    </div> 
 
     </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="duiktijd">Duiktijd:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="iduiktijd" placeholder="Voer duiktijd in"> 
 
    </div> 
 
\t </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="drukstart">Drukstart:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="idrukstart" placeholder="Voer begindruk in"> 
 
    </div> 
 
\t </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="drukeinde">Drukeinde:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="idrukeinde" placeholder="Voer eindedruk in"> 
 
    </div> 
 
     </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="watertype">Watertype:</label> 
 
    <div class="col-sm-10"> 
 
     <select class="form-control" name="iwatertype"> 
 
\t <option>Zoet</option> 
 
\t <option>Zout</option> 
 
\t <option>Brak</option> 
 
    </select> 
 
    </div> 
 
     </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="zicht">Zicht:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="izicht" placeholder="Voer zicht in"> 
 
    </div> 
 
     </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="temperatuur">Temperatuur:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="itemperatuur" placeholder="Voer temperatuur in"> 
 
    </div> 
 
     </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="duiktype">Duiktype:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="iduiktype" placeholder="Voer Duiktype in"> 
 
    </div> 
 
     </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="flesvolume">Flesvolume:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="number" class="form-control" name="iflesvolume" placeholder="Voer flesvolume in"> 
 
    </div> 
 
     </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="opmerkingen">Opmerkingen:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="iopmerkingen" placeholder="Opmerkingen"> 
 
    </div> 
 

 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
</div> 
 
</div> 
 
     
 
</form> 
 
</form> 
 
</div> 
 
    
 
<div role="tabpanel" class="tab-pane" id="planning"> 
 
this is working 
 
</div>

Проверить этот код это работает код и больше, пожалуйста, перейдите по ссылке

http://quandaflow.com/category/website/css/

+0

Спасибо, что исправил его. – erik

0

Ваш HTML код было много ошибок, незакрытые теги и т.д .. Следующий код является действительным версия о том, что вы пытаетесь сделать:

<div> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" 
                data-toggle="tab">Home</a></li> 
     <li role="presentation"><a href="#Duiklog" aria-controls="Duiklog" role="tab" data-toggle="tab">Duiklog</a></li> 
     <li role="presentation"><a href="#invoer" aria-controls="invoer" role="tab" data-toggle="tab">Invoer</a></li> 
     <li role="presentation"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">Planning</a> 
     </li> 

    </ul> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane active" id="home"> 
      <h2>Stats</h2> 
      <br> Aantal duiken: 2 
      <br> Gemiddeld lucht verbruikt: 22.5000 

     </div> 
     <div role="tabpanel" class="tab-pane" id="Duiklog"> 
      <table class="table table-hover"> 
       <thead> 
       <tr> 
        <th>#</th> 
        <th>Datum</th> 
        <th>Locatie</th> 
        <th>Buddy</th> 
        <th>Diepte</th> 
        <th>Duiktijd</th> 
        <th>Watertype</th> 
        <th>Zicht</th> 
        <th>Temp</th> 
        <th>Duiktype</th> 
        <th>Fles</th> 
        <th>Druk start</th> 
        <th>Druk einde</th> 
        <th>Druk verbruikt</th> 
        <th>Lucht verbruikt</th> 
        <th>Opmerkingen</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>2</td> 
        <td>2012-05-20</td> 
        <td>boschmolenplas</td> 
        <td>Harrie Wassen</td> 
        <td>11 m</td> 
        <td>39 min</td> 
        <td>Zoet</td> 
        <td>3-6 m</td> 
        <td>13 C</td> 
        <td>opleiding</td> 
        <td>10 l</td> 
        <td>200 bar</td> 
        <td>10 bar</td> 
        <td>190 bar</td> 
        <td>23ltr/min</td> 
        <td></td> 
       </tr> 
       <tr> 
        <td>1</td> 
        <td>2012-05-13</td> 
        <td>Panheel</td> 
        <td>Harrie Wassen</td> 
        <td>9 m</td> 
        <td>40 min</td> 
        <td>Zoet</td> 
        <td>3-6 m</td> 
        <td>13 C</td> 
        <td>opleiding</td> 
        <td>10 l</td> 
        <td>210 bar</td> 
        <td>40 bar</td> 
        <td>170 bar</td> 
        <td>22ltr/min</td> 
        <td>eerste duik</td> 
       </tr> 
      </table> 
     </div> 
     <div role="tabpanel" class="tab-pane" id="invoer"> 


      <form action="send_post.php" method="post" class="form-horizontal" role="form"> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="datum">Datum:</label> 
        <div class="col-sm-10"> 
         <input id="datum" type="date" class="form-control" name="idatum"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="locatie">Locatie:</label> 
        <div class="col-sm-10"> 
         <input id="locatie" type="text" class="form-control" name="ilocatie" 
           placeholder="Voer locatie in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="buddy">Buddy:</label> 
        <div class="col-sm-10"> 
         <input id="buddy" type="text" class="form-control" name="ibuddy" placeholder="Voer buddy in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="diepte">Diepte:</label> 
        <div class="col-sm-10"> 
         <input id="diepte" type="number" class="form-control" name="idiepte" 
           placeholder="Voer maximale diepte in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="duiktijd">Duiktijd:</label> 
        <div class="col-sm-10"> 
         <input id="duiktijd" type="number" class="form-control" name="iduiktijd" 
           placeholder="Voer duiktijd in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="drukstart">Drukstart:</label> 
        <div class="col-sm-10"> 
         <input id="drukstart" type="number" class="form-control" name="idrukstart" 
           placeholder="Voer begindruk in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="drukeinde">Drukeinde:</label> 
        <div class="col-sm-10"> 
         <input id="drukeinde" type="number" class="form-control" name="idrukeinde" 
           placeholder="Voer eindedruk in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="watertype">Watertype:</label> 
        <div class="col-sm-10"> 
         <select id="watertype" class="form-control" name="iwatertype"> 
          <option>Zoet</option> 
          <option>Zout</option> 
          <option>Brak</option> 
         </select> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="zicht">Zicht:</label> 
        <div class="col-sm-10"> 
         <input id="zicht" type="text" class="form-control" name="izicht" 
           placeholder="Voer zicht in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" 
          for="temperatuur">Temperatuur:</label> 
        <div class="col-sm-10"> 
         <input id="temperatuur" type="number" class="form-control" name="itemperatuur" 
           placeholder="Voer temperatuur in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" 
          for="duiktype">Duiktype:</label> 
        <div class="col-sm-10"> 
         <input id="duiktype" type="text" class="form-control" name="iduiktype" 
           placeholder="Voer Duiktype in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" for="flesvolume">Flesvolume:</label> 
        <div class="col-sm-10"> 
         <input id="flesvolume" type="number" class="form-control" name="iflesvolume" 
           placeholder="Voer flesvolume in"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-sm-2" 
          for="opmerkingen">Opmerkingen:</label> 
        <div class="col-sm-10"> 
         <input id="opmerkingen" type="text" class="form-control" 
           name="iopmerkingen" placeholder="Opmerkingen"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-default"> 
          Submit 
         </button> 
        </div> 
       </div> 
      </form> 
     </div> 

     <div role="tabpanel" class="tab-pane" id="planning"> 
      ..... 
     </div> 
    </div> 
</div>