Bootstrap 4标签页底部边框滑动效果实现求助

我来帮你搞定这个Bootstrap Tab的滑动下划线效果，用CSS加一点点jQuery就能实现，步骤很清晰，咱们一步步来：

第一步：精简并优化你的CSS #

先把重复的样式合并，避免冗余代码，同时为滑动下划线准备样式：

/* 基础导航链接样式 */
.nav-tabs .nav-item .nav-link {
    color: #9D9D9D;
    height: 48px;
    padding: 0 24px;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 160px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background-color: white;
    border: none;
    position: relative;
}

/* 激活状态的链接样式 */
.nav-tabs .nav-item .nav-link.active {
    color: #373C47; /* 只修改激活状态的文字颜色，其他样式继承基础样式 */
}

.custom-tabs {
    padding: 0 24px;
    position: relative; /* 为滑动下划线提供定位容器 */
}

/* 滑动下划线样式 */
.custom-tabs .slider {
    position: absolute;
    bottom: 0;
    height: 0.1rem;
    background-color: #373C47;
    transition: all 0.3s ease; /* 实现平滑的滑动过渡动画 */
}

第二步：调整HTML结构 #

在你的ul.nav-tabs容器里添加一个专门的滑块元素：

<ul class="nav nav-tabs bg-white card-shadow custom-tabs" id="myTab" role="tablist">
    <!-- 新增滑动下划线元素 -->
    <span class="slider"></span>
    
    <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">Home</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">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Tab 1</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab 2</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab 3</div>
</div>

第三步：添加JS控制滑块位置 #

利用jQuery（你已经引入了Bootstrap依赖的jQuery）来监听tab切换和窗口变化，动态调整滑块的位置和宽度：

$(document).ready(function() {
    // 定义设置滑块位置的函数
    function setSliderPosition() {
        const activeLink = $('.nav-tabs .nav-link.active');
        const slider = $('.custom-tabs .slider');
        if (activeLink.length && slider.length) {
            // 计算滑块相对于容器的left值和宽度
            slider.css({
                left: activeLink.offset().left - $('.custom-tabs').offset().left,
                width: activeLink.outerWidth()
            });
        }
    }

    // 页面加载时初始化滑块位置
    setSliderPosition();

    // 监听窗口 resize，避免窗口变化后滑块位置错位
    $(window).on('resize', setSliderPosition);

    // 监听Bootstrap的tab切换完成事件，更新滑块位置
    $('a[data-toggle="tab"]').on('shown.bs.tab', function() {
        setSliderPosition();
    });
});

效果原理说明 #

• 滑块是一个绝对定位的span元素，固定在导航容器底部，通过left和width属性控制位置和长度
• CSS的transition属性让滑块的位置变化产生平滑的滑动动画
• JS部分负责在页面初始化、窗口调整、tab切换时，精准计算当前激活tab的位置和宽度，同步更新滑块状态

这样就能实现你想要的底部边框滑动效果啦！

内容的提问来源于stack exchange，提问作者user7301337