jquery 引导选项卡栏平滑地移动导航按钮

eufgjt7s  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(96)

我有一个正常的引导选项卡面板切换块
在导航中切换块时，活动选项卡将突出显示
但现在当我点击活动标签的背景立即改变
有没有可能在切换标签时，背景不会立即改变，而是根据需要的标签平滑地左右移动？
这可以用css完成吗？或者我必须使用js？

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
}
.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}

个字符

jquery

3条答案

按热度按时间
1zmg4dgp

1zmg4dgp1#

她的方法是你可以用一个小jQuery和使用 Bootstrap shown.bs.tab事件来检测导航选项卡何时完全显示。
只有在页面上使用了一次.nav-tabs时，才能正常工作，就像你的例子一样。但是如果你想让它在页面上的多个.nav-tabs示例上工作，那么你需要稍微修改一下。
这是你的滑动的例子。nav-tab背景根据您的问题。
查看jquery代码中的注解，以便您了解正在发生的事情。

// on ready
$(document).ready(function() {

  // active tab highlight function with params init and resize
  function active_tab_highlight_pos(init = false, resize = false) {

    // our nav tabs
    let nav_tabs = $('.nav-tabs');

    // find our current active tab element
    let active_tab = $(nav_tabs).find('.active');

    // get set nav tabs positions
    let nav_tabs_pos = {
      x: $(nav_tabs).offset().left,
      y: $(nav_tabs).offset().top
    }

    // get set current active tab positions and dimensions
    let active_tab_pos = {
      x: $(active_tab).offset().left - nav_tabs_pos.x,
      y: $(active_tab).offset().top - nav_tabs_pos.y,
      w: $(active_tab).outerWidth(),
      h: $(active_tab).outerHeight()
    }

    // if we are initiating active highlight for the first time
    if (init) {

      // prepend active highlight list element to our nav tabs
      $(nav_tabs).prepend('<li class="active-highlight"></li>');

    }
    
    // get our active hightlight element
    let active_highlight = $(nav_tabs).find('.active-highlight');
    
    // if we are resizing window
    if (resize) {
    
      // disable transition effect
        $(active_highlight).css({
        'transition': 'none'
      });
      
      
    // else enable transition effect
    } else {
    
      // change here to change the transition effect and speed
        $(active_highlight).css({
        'transition': 'all .5s ease'
      });
    
    }

    // set active highlight position css
    $(active_highlight).css({
      'width': active_tab_pos.w + 'px',
      'height': active_tab_pos.h + 'px',
      'left': active_tab_pos.x + 'px',
      'top': active_tab_pos.y + 'px'
    });

  }

  // reposition active tab highlight on init
  active_tab_highlight_pos(true);
  
  // on window responsive resize event
  $(window).on('resize', function() {
  
    // reposition active tab highlight on responsive resize
    active_tab_highlight_pos(false, true);
    
  });

  // data-bs-toggle="tab" on shown event handler
  $('[data-bs-toggle="tab"]').on('shown.bs.tab', function() {

    // reposition active tab highlight
    active_tab_highlight_pos();

  });

});
.nav-tabs {
  position: relative;
  justify-content: center;
  padding-bottom: 10px;
}

.nav-tabs > li {
  position: relative;
  z-index: 10;
}

.nav-tabs > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
  font-size: 18px;
  color: #000;
  border: none;
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.5s ease;
}

.nav-tabs > li > a.active {
  color: #FFF;
}

.nav-tabs > .active-highlight {
  display: block;
  position: absolute;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation">
    <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a>
  </li>
  <li role="presentation">
    <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false">List 2</a>
  </li>
  <li role="presentation">
    <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false">List 3</a>
  </li>
  <li role="presentation">
    <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false">List 4</a>
  </li>
</ul>

<div class="tab-content">
  <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
  <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
  <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
  <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

这是一个jsfiddle版本。https://jsfiddle.net/joshmoto/32epbqu4/4/
此外，您可能想要测试在响应模式和设备，以检查有没有问题的定位，但据我所知，它目前是工作良好的响应太多。
此脚本将动画导航标签背景的任何导航标签的位置或大小在您的文档。
希望这对你有帮助！

赞(0）分享  回复(0）举报  2023-08-04
0qx6xfy6

0qx6xfy62#

没有JavaScript的Bootstrap标签的平滑过渡效果
为了在不使用JavaScript的情况下切换标签时实现平滑的过渡效果，您可以使用CSS过渡。在这个例子中，我们将动画活动标签的背景颜色。以下是您的操作方法：
添加以下CSS规则来处理过渡效果：联系我们

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
  transition: background-color 0.3s ease; /* Add this line for the transition effect */
}

字符串
transition属性指定将被动画化的CSS属性（在本例中为background-color）、过渡的持续时间（0.3秒）和缓动功能（用于平滑过渡的缓动）。
修改活动标签页的CSS规则，直接设置背景色，不设置过渡效果：联系我们

.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background-color: #A700FF; /* Change 'background' to 'background-color' */
  border-radius: 10px;
  transition: none; /* Add this line to disable the transition for the active tab */
}

型
通过添加过渡：无;对于活动选项卡规则，它确保背景颜色立即更改，而没有过渡效果。
以下是更新后的HTML和CSS代码：

HTML：

<ul class="nav nav-tabs" role="tablist">
  <!-- ... (your tab list) ... -->
</ul>
<div class="tab-content">
  <!-- ... (your tab content) ... -->
</div>

型

CSS：

CSS

li {
  margin: 0;
  display: block;
}

li:before {
  display: none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
  transition: background-color 0.3s ease; /* Add this line for the transition effect */
}

.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background-color: #A700FF; /* Change 'background' to 'background-color' */
  border-radius: 10px;
  transition: none; /* Add this line to disable the transition for the active tab */
}

.info {
  padding: 30px;
  text-align: center;
}

型
现在，当您切换标签时，您应该看到活动和非活动标签之间的背景颜色平滑过渡。

赞(0）分享  回复(0）举报  2023-08-04
cnh2zyt3

cnh2zyt33#

我已经成功地使用linear-gradient、background-position和transition的组合来实现它：

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
  margin-left:10px;
}

.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  border-radius: 10px;
}

.nav-tabs > li > a.left {
  background-position:left bottom;
  background: linear-gradient(to right, white 50%, #A700FF 50%);
  background-size: 210% 100%;
}

.nav-tabs > li > a.left.active {
  background-position:right bottom;
  transition: background 2s ease;
}

.nav-tabs > li > a.right {
  background: linear-gradient(to right, #A700FF 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}

.nav-tabs > li > a.right.active {
  background-position: left bottom;
  transition: background 2s ease;
}

.info {
  padding: 30px;
  text-align: center;
}

个字符

赞(0）分享  回复(0）举报  2023-08-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com