javascript - 如何仅在右侧应用阴影并隐藏底部边框？-6ren

javascript - 如何仅在右侧应用阴影并隐藏底部边框？

转载作者：行者123 更新时间：2023-11-28 00:32:08

我创建了一个带有 Bootstrap 的导航栏，我想在其中执行事件选项卡位于其他选项卡之上的技巧，我得到了这样的东西:

我想这很好，现在我不得不做一些技巧来将选项卡与内容和课前类(class)结合起来它工作得很好:

现在我将这个类应用到 bootstrap 创建的 .active 上，这样效果就可以了，我的问题是当我在选项卡之间切换时，我可以在一秒钟内看到这个巨大的把戏:

有没有办法解决这个问题或以其他方式隐藏底部阴影？我已经尝试了 hidden.bs.tab、shown.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>

关于javascript - 如何仅在右侧应用阴影并隐藏底部边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58266796/

文章推荐： javascript - 从右到左 react native - 本地化

文章推荐： c++ - 将指向结构的 void 指针或 memcpy 转换为新结构？

文章推荐： html - 将 div 粘贴到父聊天窗口的底部

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何仅在右侧应用阴影并隐藏底部边框？