javascript - 如何使用 JQuery 在我的导航栏中点击滑动条

Question

目前，我的导航栏中有三个选项卡，BOARD、SKILLS 和 ABOUT，它们都在一个容器中，容器底部有一个边框。当我单击其中一个 div 时，会选择相应的 div 名称，以指示我在哪个选项卡上。这是目前正在工作的，可以在我的 codePen.io 中看到:

What I have so far - click here

.

我想做的是，当我从 BOARD 到 SKILLS 或 BOARD 到 ABOUT 时，让条形图从一个选项卡滑动到下一个选项卡，而不是静态的(这是我目前拥有的)例如单击从一个选项卡到下一个选项卡时的平滑滚动条。我该怎么做呢？我不知道从哪里开始。

Answer 1

你可以使用这个函数来滑动一个元素:

function scaleSlider(to) {
  var $slider = $('.slider', '.tabs'),
    $elSpan = to.find('span'),
    width = $elSpan.width(),
    left = $elSpan.position().left;
  $slider.animate({
    width: width,
    left: left
  });
}

在您的 HTML 中，您需要添加 .slider 元素:

<div class="col-md-8 tabs">
    <div class="slider"></div>
    <!-- your html here -->
</div>

CSS:

.tabs .slider {
    position: absolute;
    height:100%;
    border-bottom: 4px solid grey;
}

因此，当您单击调用 scaleSlider 的菜单元素时:

$('.skills').on("click", function() {
    //Your code here
    scaleSlider($(this));
});

请查看此演示:http://codepen.io/anon/pen/EyoBmg