爲什麼引導程序同時顯示2個選項卡？

我正在開發一個使用bootsrap v4的網站，我正在努力使用tabs。正如您在單擊第3個或最後一個選項卡時看到的，然後單擊第一個選項卡，它會同時顯示2個選項卡，並且當您繼續單擊並交替顯示這些選項卡時，問題會自行消失。爲什麼引導程序同時顯示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>

來源

2017-08-25 Ivan Vilanculo

我建議在運行尖端時使用完整頁面 –

對我來說MacOS - Chrome沒有任何問題。 –

在MacOS - Mozilla它是！ –

在這裏，你去了一個解決方案（你可能會說，這周圍的工作）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並將href更改爲data-href,HTML。由OP

要求

更新答案這裏是更新的答案https://jsfiddle.net/k0uv976k/6/

希望這將解決您的問題。

來源

2017-08-25 09:00:32 Shiladitya

不工作，我用mozilla/mac進行測試。 –

@CarnaruValentin。它使用'Firefox v54.0.1'和'Firefox v55.0.2'' MAC'。請讓我知道你的Firefox版本。 – Shiladitya

@Shiladitya謝謝你的回答！它幫助我解決了這個問題。但是我需要將'data（'href'）'改成'attr（'href'）'看起來像這樣'$（$（this）.attr（'href'））。show（）。addClass（'顯示主動'）。兄弟姐妹（）。hide（）;'如果你更新你的答案會很好。 –

爲什麼引導程序同時顯示2個選項卡？

回答

相關問題