Javascript 如何使用JQuery在导航栏中单击滑动条

目前，我有三个标签在我的导航栏，董事会，技能，和约，所有在一个容器与一个董事会底部的容器。当我单击其中一个div时，会选择相应的div名称，以指示我在哪个选项卡上。这就是目前正在工作的内容，可以在my codePen.io中看到：

---

我试图做的是，当我从一个面板转到另一个技能或面板时，让一个条从一个选项卡滑动到下一个选项卡，而不是像静态的（这是我目前拥有的）那样，例如，从一个选项卡单击到下一个选项卡时，平滑的滚动条。我该怎么做呢？我不知道从哪里开始

您可以使用此功能滑动元素：

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>

因此，当您单击菜单元素时，可以调用

scaleSlider

：

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

---

请查看此演示：

查看有关动画或lava js的google web基础知识。您可以在“选择”选项卡上移动div，也可以移动活动选项卡本身。

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

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