Question

我制作了一个自定义的Bootstrap 4 Tab菜单，我想在底部边框添加一个幻灯片效果，如下面的这个gif：

问题是，我不知道如何实现这一点，但我还没有找到合适的解决方案。我假设我可以在这里使用JS，也许是CSS。我想其中任何一个都是可能的。这是我的代码

＆＃13;

.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;
    position: relative;
}


.nav-tabs .nav-item .nav-link.active {
    border-bottom: 0.1rem solid #373C47;
    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;
    position: relative;
}

.custom-tabs {
    padding: 0 24px;
}


.nav-tabs .nav-item .nav-link {
    border: none;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<ul class="nav nav-tabs bg-white card-shadow custom-tabs" 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">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>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

＆＃13;

有人可以给我一些关于如何实现上述目标的提示吗？提前致谢

Answer 1

我相信来自地球的CodePen example

可以提供帮助。

<div class="Panel">
    <nav>
        <ul class="Tabs">
            <li class="Tabs__tab active Tab"><a href="#">Tab item</a></li>
            <li class="Tabs__tab Tab"><a href="#">Mega</a></li>
            <li class="Tabs__tab Tab"><a href="#">Pane name</a></li>
            <li class="Tabs__presentation-slider" role="presentation"></li>
        </ul>
    </nav>
    <div class="Panel__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis sint, facere aut, mollitia nihil tenetur sed vitae alias dolorum delectus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, earum.</p>
    </div>
</div>

@use postcss-nested;

body {
    background-color: #d9d9d9;
    font-family: 'Roboto', sans-serif;
}

.Panel {
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
    &__body {
        background-color: #f2f2f2;
        padding: 10px 20px;
    }
}

.Tabs {
    position: relative;
    background-color: #fff;
    &:after {
        content: ' ';
        display: table;
        clear: both;
    }
    margin: 0;
    padding: 0;
    list-style: none;
    &__tab {
        float: left;
        width: 33.333%;
        text-align: center;
        &:first-child.active ~ .Tabs__presentation-slider {
            left: 0;
        }
        &:nth-child(2).active ~ .Tabs__presentation-slider {
            left: 33.333%;
        }
        &:nth-child(3).active ~ .Tabs__presentation-slider {
            left: calc(33.333% * 2);
        }
    }
    &__presentation-slider {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 33.333%;
        height: 2px;
        background-color: #4A66F4;
        transition: left .25s;
    }
}

.Tab {
    font-family: 'Roboto Slab';
    > a {
        display: block;
        padding: 10px 12px;
        text-decoration: none;
        color: #666;
        transition: color .15s;
    }
    &.active {
        > a {
            color: #222;
        }
    }
    &:hover {
        > a {
            color: #222;
        }
    }
}

var tabs = document.getElementsByClassName('Tab');

Array.prototype.forEach.call(tabs, function(tab) {
    tab.addEventListener('click', setActiveClass);
});

function setActiveClass(evt) {
    Array.prototype.forEach.call(tabs, function(tab) {
        tab.classList.remove('active');
    });

    evt.currentTarget.classList.add('active');
}

Bootstrap 4 - 标签幻灯片效果

1 个答案: