我正在使用bootsrap v4开发网站，而且我正在努力使用tabs。正如您在单击第3个或最后一个选项卡时看到的那样，然后单击第一个选项卡，它同时显示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>
答案 0 :(得分：2)
在这里，您可以使用解决方案（您可以说它是一种解决方法）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/
希望这能解决您的问题。