Wie kann ich eine gleitende Stange haben, die auf klickt, klicken Sie in meiner Navigationsleiste mit JQuery

Question

Derzeit habe ich drei Registerkarten in meiner Navigationsleiste, BOARD, SKILLS und ABOUT, alle in einem Container mit einem Boarder-Boden für die Container. Wenn ich auf einen der divs klicke, wird der entsprechende div-Name ausgewählt, um anzuzeigen, auf welchem ​​Tab ich bin. Das ist, was zur Zeit funktioniert und kann in meinem codePen.io zu sehen:

What I have so far - click here

. 

Was ich versuche zu tun ist, wenn ich von BOARD Fähigkeiten oder BOARD gehen ÜBER, ist es, einen Balken von einer Registerkarte zur nächsten gleiten zu lassen, anstatt statisch zu sein (was ich gerade habe), z ein sanfter Scroller beim Klick von einem Tab zum nächsten. Wie kann ich das tun? Ich habe keine Ahnung, wo ich anfangen soll.

Answer 1

Mit dieser Funktion kann ein Element gleiten:

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

in Ihrem HTML Sie das .slider Element hinzufügen müssen:

<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; 
} 

Also, wenn Sie klicken auf ein Menüelement, das Sie anrufen scaleSlider:

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

Bitte lesen Sie in dieser Demo: http://codepen.io/anon/pen/EyoBmg