为什么引导同时显示两个选项卡?

$('a[data-toggle="tab"]').click(function(){
   $($(this).data('href')).show().addClass('show active').siblings().hide();
});

body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #868e96;
  text-align: left;
}

.search-tabs > h1 {
  font-weight: normal;
  margin-bottom: 15px;
}
.search-tabs .tabbable > .nav-tabs li {
    margin-bottom: -1px;
    margin-right: 5px;
    z-index: 0;
}
.search-tabs .tabbable > .nav-tabs li a.active {
    background-color: #FF9F00;
}
.search-tabs .tabbable > .nav-tabs li a {
    background: rgba(0, 0, 0, 0.4);
        background-color: rgba(0, 0, 0, 0.4);
    border: none !important;
    color: #fff;
    position: relative;
    display: block;
    padding: 10px 15px;
    border-radius: 0;
}

.search-tabs .tabbable > .nav-tabs li a.active::before {
    content: "";
    display: block;
    position: absolute;
    background-color: #FF9F00;
    width: 100%;
    height: 5px;
    top: -5px;
    left: 0;
}
.search-tabs .tabbable > .nav-tabs li a .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-right: 2px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>
<section class="search-tabs">
  <h1>Está na hora de <b><span style="" class="morphext"><span class="animated flipInX">se perder</span></span></b></h1>
  <section class="tabbable">
    <ul class="nav nav-tabs">
      <li class="nav-item"><a data-toggle="tab" data-href="#hotels-tab" class="nav-link active"><i class="icon mdi mdi-hotel"></i> <span class="hidden-sm-down">Hoteis</span></a></li>
      <li class="nav-item"><a data-toggle="tab" data-href="#flights-tab" class="nav-link"><i class="icon fa fa-plane"></i> <span class="hidden-sm-down">Voos</span></a></li>
      <li class="nav-item"><a data-toggle="tab" data-href="#events-tab" class="nav-link"><i class="icon fa fa-bolt"></i> <span class="hidden-sm-down">Actividades</span></a></li>
      <li class="nav-item"><a data-toggle="tab" data-href="#rentcar-tab" class="nav-link"><i class="icon mdi mdi-car-hatchback"></i> <span class="hidden-sm-down">Rent Car</span></a></li>
    </ul>
    <section class="tab-content">
      <section id="hotels-tab" role="tabpanel" class="tab-pane fade show active">
        <section class="app-loading" style="min-height: 200px; display: none;"></section>
        <section>
          <h2>Pesquisar Hoteis</h2>
          <form action="//hotels/search" method="get">
            <section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
              <label>Onde vais?</label>
              <select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
                <option value="" selected="selected"></option>
              </select>
              <div class="selectize-control selectize-place single">
                <div class="selectize-input items not-full" style="">
                  <input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
                </div>
                <div class="selectize-dropdown single selectize-place" style="display: none; width: 700px; top: 38px; left: 0px;">
                  <div class="selectize-dropdown-content"></div>
                </div>
              </div>
            </section>
            <section class="row">
              <section class="col-md-6">
                <section data-v-d1911898="" class="form-group range-piker">
                  <label data-v-d1911898="">Chegada - Saida</label>
                  <section data-v-d1911898="" style="position: relative;">
                    <section data-v-d1911898="" class="date-range-view">
                      <section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
                      <section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
                    </section>
                    <input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
                  </section>
                </section>
              </section>
              <section class="col-md-3">
                <section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
                  <label>Adultos </label>
                  <select class="custom-select form-control">
                    <option selected="selected">1</option>
                    <option>2</option>
                    <option>3</option>
                    <option value="4+">4 / +</option>
                  </select>
                </section>
              </section>
              <section class="col-md-3">
                <section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
                  <label>Crianças</label>
                  <select class="custom-select form-control">
                    <option selected="selected">0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option value="4+">4 / +</option>
                  </select>
                </section>
              </section>
            </section>
            <button class="btn btn-primary">Pesquisar Hoteis</button>
          </form>
        </section>
      </section>
      
      <section id="flights-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
        <section>
          <h2>Pesquisar voos baratos</h2>
          <form action="/flights/-" method="get">
            <section class="row">
              <section class="col-md-12"><span class="trip-switch active">Ida e Volta</span> <span class="trip-switch">Só Ida</span></section>
            </section>
            <section class="row">
              <section class="col-md-6">
                <section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
                  <label>De onde?</label>
                  <select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
                    <option value="" selected="selected"></option>
                  </select>
                  <div class="selectize-control selectize-place single">
                    <div class="selectize-input items not-full has-options" style="">
                      <input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
                    </div>
                    <div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
                      <div class="selectize-dropdown-content"></div>
                    </div>
                  </div>
                </section>
              </section>
              <section class="col-md-6">
                <section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
                  <label>Para onde?</label>
                  <select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
                    <option value="" selected="selected"></option>
                  </select>
                  <div class="selectize-control selectize-place single">
                    <div class="selectize-input items not-full has-options" style="">
                      <input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
                    </div>
                    <div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
                      <div class="selectize-dropdown-content"></div>
                    </div>
                  </div>
                </section>
              </section>
            </section>
            <section class="row">
              <section class="col-md-6">
                <section data-v-d1911898="" class="form-group range-piker">
                  <label data-v-d1911898="">Partida - Volta</label>
                  <section data-v-d1911898="" style="position: relative;">
                    <section data-v-d1911898="" class="date-range-view">
                      <section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
                      <section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
                    </section>
                    <input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
                  </section>
                </section>
              </section>
              <section class="col-md-3">
                <section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
                  <label>Adultos</label>
                  <select class="custom-select form-control">
                    <option selected="selected">1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </section>
              </section>
              <section class="col-md-3">
                <section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
                  <label>Crianças </label>
                  <select class="custom-select form-control">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </section>
              </section>
            </section>
            <button class="btn btn-primary">Pesquisar voos</button>
          </form>
        </section>
      </section>
      <section id="events-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
        <section>
          <h2>Pesquisar Hoteis</h2>
          <form action="/activities//search" method="get">
            <section class="row">
              <section class="col-md-4">
                <section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
                  <label>Onde?</label>
                  <select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
                    <option value="" selected="selected"></option>
                  </select>
                  <div class="selectize-control selectize-place single">
                    <div class="selectize-input items not-full" style="">
                      <input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
                    </div>
                    <div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
                      <div class="selectize-dropdown-content"></div>
                    </div>
                  </div>
                </section>
              </section>
              <section class="col-md-5">
                <section data-v-d1911898="" class="form-group range-piker">
                  <label data-v-d1911898="">Check in - Check out</label>
                  <section data-v-d1911898="" style="position: relative;">
                    <section data-v-d1911898="" class="date-range-view">
                      <section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
                      <section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
                    </section>
                    <input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
                  </section>
                </section>
              </section>
              <section class="col-md-3">
                <section class="form-group">
                  <label>O que procura?</label>
                  <select class="form-control custom-select">
                    <option value="">Tudo</option>
                    <option value="1">Eventos</option>
                    <option value="2">Excurções</option>
                    <option value="2">Actividades</option>
                    <option value="3">Outros</option>
                  </select>
                </section>
              </section>
            </section>
            <button class="btn btn-primary">Pesquisar Actividades</button>
          </form>
        </section>
      </section>
      <section id="rentcar-tab" aria-expanded="false" class="tab-pane fade">
        <section>
          <h2>Pesquisar Viaturas</h2>
          <form action="/rent-car//search" method="get">
            <section class="row">
              <section if="hideLocation" class="col-md-4">
                <section class="form-group form-group-icon-left"><i class="mdi mdi-map-marker input-icon"></i>
                  <label>Onde?</label>
                  <select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
                    <option value="" selected="selected"></option>
                  </select>
                  <div class="selectize-control selectize-place single">
                    <div class="selectize-input items not-full" style="">
                      <input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
                    </div>
                    <div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
                      <div class="selectize-dropdown-content"></div>
                    </div>
                  </div>
                </section>
              </section>
              <section class="col-md-8">
                <section class="row">
                  <section class="col-md-6">
                    <section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
                      <label>Quando?</label>
                      <input readonly="readonly" class="form-control flatpickr-input" value="2017-08-25 12:00" type="hidden">
                      <input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
                    </section>
                  </section>
                  <section class="col-md-6">
                    <section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
                      <label>Ate quanto?</label>
                      <input readonly="readonly" class="form-control flatpickr-input" value="2017-09-01 12:00" type="hidden">
                      <input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
                    </section>
                  </section>
                </section>
              </section>
            </section>
            <button class="btn btn-primary">Pesquisar Viaturas</button>
          </form>
        </section>
      </section>
    </section>
  </section>
</section>