Доброе время суток господа, вопрос вроде и простой а вроде и сложный, необходимо выбирать стандартные bootstrap 4 табы выпадающим списком select, а не в ссылками...
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
Из вопроса несколько не ясно, показываются ли у вас заголовки табов. Если они есть, то все довольно просто.
$("select").change(function(){
var id = $(this).val();
$("a[href='" + id + "']").tab('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="m-3">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" >home</div>
<div class="tab-pane fade" id="nav-profile" >profile</div>
<div class="tab-pane fade" id="nav-contact" >contact</div>
</div>
</div>
<select class="m-4 form-control w-25">
<option value="#nav-home">home</option>
<option value="#nav-profile">profile</option>
<option value="#nav-contact">contact</option>
</select>
Если заголовки не показываются, то в целом задача сводится к переключению классов .show .active
, хотя, вероятно в этом случае не будут срабатывать события show.bs.tab
и т.п., да и в целом тут bs не нужен, обычное скрытие/отображение блоков.
$("select").change(function(){
var id = $(this).val();
$(id).addClass('show active')
.siblings()
.removeClass('show active');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="tab-content m-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" >home</div>
<div class="tab-pane fade" id="nav-profile" >profile</div>
<div class="tab-pane fade" id="nav-contact" >contact</div>
</div>
<select class="m-4 form-control w-25">
<option value="#nav-home">home</option>
<option value="#nav-profile">profile</option>
<option value="#nav-contact">contact</option>
</select>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
имеется несколько select обернутых в div на странице, необходимо чтобы при выборе внутри рядом стоящего div отображалась информация
Опытные коллеги кто сталкивался с такой древовидной структурой Bootstrap tree view как лучше всего организовать по ней поиск, если дерево очень большое,...
есть 4 блока в каждом из которых находится картинкаКаким образом можно сделать так чтобы изначально не было видно изображений во всех четырех...
Мне нужно сделать 4 треугольника в css, я делаю их через border примерно так: