为什么 bootstrap 同时显示 2 个标签页？

Question

我正在使用 bootsrap v4 开发一个网站，但我在使用 tabs 时遇到困难。正如您可能看到的，当您单击第三个或最后一个选项卡，然后单击第一个选项卡时，它会同时显示 2 个选项卡，而且当您继续单击并交替这些选项卡时，问题会自行消失。

我做错了什么？
jsFiddle

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;
}

<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"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<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" 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" 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" 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" 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>

Answer 1

给你一个解决方案（你可以说它是一个解决方法）https://jsfiddle.net/k0uv976k/5/

$('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>

我用 jQuery 激活了 tabs 并在 HTML 中将 href 更改为 data-href。

OP

要求的更新答案

这是更新后的答案https://jsfiddle.net/k0uv976k/6/

希望这能解决您的问题。

为什么 bootstrap 同时显示 2 个标签页？

Why bootstrap shows 2 tabs at the same time?

javascript

jquery

html

css

twitter-bootstrap-4