JQueryを使用してナビゲーションバー内をクリックしてスライドするスライドバーを表示するには

Question

現在、ナビゲーションバーにはボード、スキル、およびABOUTの3つのタブがあります。コンテナ。 divの1つをクリックすると、適切なdiv名が選択され、現在表示されているタブを示します。私はスキルや基板対基板から行くとき

What I have so far - click here

. 

は、私は何をしようとしていることである：それは、現在取り組んでいると私のcodePen.ioで見ることができるものです私が現在持っているのは静的なものではなく、あるタブから次のタブへのスライドバーです。あるタブから次のタブへのスクロールをスムーズに行うことができます。これをやり遂げるにはどうすればいいですか？私はどこから始めるべきか分かりません。

Answer 1

あなたは要素をスライドするために、この機能を使用することができます。

あなたが .slider要素を追加する必要があり、あなたのHTMLで

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

：

<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