Я создал панель навигации с начальной загрузкой, где я хочу сделать трюк, чтобы активная вкладка была выше других, и я получил что-то вроде этого:
Это было нормально, я думаю, теперь мне нужно было сделать какой-то трюк, чтобы соединить вкладку с содержимым и с классом перед. Это работало нормально:
Теперь я применяю этот класс к .active, который создается при начальной загрузке, чтобы эффект работал, моя проблема в том, что когда я переключаюсь между вкладками, я вижу ужасный трюк за одну секунду:
Есть ли способ решить эту проблему или спрятать нижнюю тень другим способом? Я пробовал использовать на hidden.bs.tab, показано.bs. вкладка безуспешно.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<style>
ul.custom-nav-tab {
border-bottom: 0px !important;
margin-left: 20px;
font-weight: 800;
}
ul.custom-nav-tab li a.active {
background-color: #ffeed2 !important;
border-color: #fff0 !important;
}
ul.custom-nav-tab li a {
box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.3);
padding: 15px 20px 15px 20px;
color: inherit;
border-radius: 10px 10px 0px 0px !important;
background-color: #fef7ea !important;
}
div.custom-nav-tab {
position: relative;
border-radius: 10px;
background-color: #ffeed2;
padding: 20px;
box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.3);
}
.custom-nav-active-tab {
position: relative;
}
.custom-nav-active-tab:before {
content: "";
display: block;
width: 100%;
height: 15px;
background-color: #ffeed2;
position: absolute;
bottom: -5px;
left: 0;
z-index: 10;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs custom-nav-tab" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Hotel + Actividad</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hotel</a>
</li>
</ul>
<div class="tab-content custom-nav-tab" id="myTabContent">
<div class="tab-pane fade show active tab1" id="home" role="tabpanel" aria-labelledby="home-tab"> <p>Donec mattis laoreet suscipit. Donec blandit quam sed justo mattis, et hendrerit leo sodales. Donec elit leo, sollicitudin sed purus vitae, iaculis iaculis lacus. Proin quis leo a purus gravida ultricies. Nam molestie a nisi sed scelerisque. Proin in suscipit sem, in viverra libero. Proin quam diam, consequat vitae arcu eget, egestas ultrices eros. Donec sed fermentum lorem. Nam dolor sem, aliquam dapibus rutrum id, tempor ac leo. Vestibulum in neque id eros tristique lacinia. Duis a bibendum dolor, nec cursus eros. Morbi quis enim eu quam gravida lacinia. Etiam tincidunt venenatis felis quis pellentesque. Sed sagittis elit vitae arcu malesuada, quis dapibus libero porttitor.
</p></div>
<div class="tab-pane fade tab2" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <p>xxxxxDonec mattis laoreet suscipit. Donec blandit quam sed justo mattis, et hendrerit leo sodales. Donec elit leo, sollicitudin sed purus vitae, iaculis iaculis lacus. Proin quis leo a purus gravida ultricies. Nam molestie a nisi sed scelerisque. Proin in suscipit sem, in viverra libero. Proin quam diam, consequat vitae arcu eget, egestas ultrices eros. Donec sed fermentum lorem. Nam dolor sem, aliquam dapibus rutrum id, tempor ac leo. Vestibulum in neque id eros tristique lacinia. Duis a bibendum dolor, nec cursus eros. Morbi quis enim eu quam gravida lacinia. Etiam tincidunt venenatis felis quis pellentesque. Sed sagittis elit vitae arcu malesuada, quis dapibus libero porttitor.
</p></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".nav-item:has(a.active)").addClass("custom-nav-active-tab");
});
$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
$(".nav-item, a").not(".active").removeClass("custom-nav-active-tab");
$(".nav-item:has(a.active)").addClass("custom-nav-active-tab");
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>