javascript - 如何仅在右侧应用阴影并隐藏底部边框？
问题描述
我创建了一个带有引导程序的导航栏，我想在其中执行活动选项卡高于其他选项卡的技巧，我得到了这样的东西：
我想这很好，现在我不得不做一些技巧来加入带有内容的选项卡和课前它工作得很好：
现在我将这个类应用到 bootstrap 创建的 .active ，所以效果有效，我的问题是当我在选项卡之间切换时，我可以在一秒钟内看到这个巨大的技巧：
有没有办法解决这个问题或以其他方式隐藏底部阴影？我在 hidden.bs.tab、showed.bs.tab 上尝试过，但没有成功。
<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>解决方案
应用伪元素技巧a并将其视为inherit背景颜色的值。这将减少或使不良影响不明显
<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 a:before {
content: "";
display: block;
width: 100%;
height: 15px;
background-color: inherit;
position: absolute;
bottom: 0;
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>推荐阅读
- c - 将一个字符串添加到另一个字符串
- architecture - 架构驱动因素/因素与架构重要要求之间有什么区别
- java - ModelMapper 将数组属性 (get(0)) 展平为字符串？
- c# - 问题如果我第二次运行一个进程，内存使用量会增加c#
- django-rest-framework - 如何在 Django REST 框架的自定义序列化器字段中访问请求对象？
- c# - 如何使 C# 方法通用，以便它可以被不同的类使用
- asp.net-core - 迷失在身份验证中——这是什么类型的 JWT 身份验证？
- python - 在使用 selenium 抓取之前等待网页响应
- node.js - 快速创建大量素数
- bash - [ -r $1 ] 和 [ ！-r $1 ] 在 Bash 中是什么意思？