tab-contents bootstrap

I'm having trouble with the tabs. When I enter the URL where I use them, the two tabs are shown together (tab1 and tab2). But when I click on tab 1 or 2, they show up fine.

Here my code:

<div class="panel-body">
<ul id="tabs" class="nav nav-tabs">
    <!--<li class="active"><a data-toggle="tab" href="#home">Detalle</a></li> -->
    <li class="active"><a data-toggle="tab" href="#menu1">Datos de padre/madre (tutor o encargado)</a></li>
    <li><a data-toggle="tab" href="#menu2">Datos de situación laboral</a></li>
</ul>

<!-- En un móvil las columnas ocupan la mitad del dispositivo y en un 
 ordenador ocupan un cuarto parte de la anchura disponible -->
<div class="tab-content row" id="content">
    <div id="menu1" class="tab-pane fade in active">
        <div class="col-xs-12 col-md-6"><h3><b>Datos del Padre</b></h3>
        <br>

        <br>

        </div>

        <div class="col-xs-12 col-md-6"><h3><b>Datos de la Madre</b></h3>
        <br>

        </div>
    </div>


        <div id="menu2" class="tab-pane fade in active">
            <div class="col-xs-12 col-md-6"><h3><strong>Situación Laboral</strong></h3>
            <br />

    </div>
</div>