Rails 5中的材質選項卡與Turbolinks

我想在這裏做一些這樣的事情：http://www.jqueryscript.net/demo/Material-Design-Sliding-Tab-Menu-With-jQuery-CSS3/作爲我的Rails應用程序中的一個菜單。應該播放滑塊的（下劃線）滑動動畫，並且頁面應該同時加載。Rails 5中的材質選項卡與Turbolinks

我設法讓滑塊在鏈接下移動，通過將菜單設置爲data-turbolinks-permanent來點擊，但我爲滑塊設置的轉換不起作用 - 它只是跳轉。我也嘗試使用jquery.animate而不是過渡，但是動畫非常延遲，緩慢且不連貫。 Turbolinks有什麼方法可以實現這一點嗎？

$('.menu-item').on 'click',() -> 
    return if $(this).hasClass('slider') 
    slider = $('.slider') 
    slider.css('width', $(this).width()) 
    slider.css('left', $(this).offset().left - ($(window).width()-$('#wrapper').width())/2)

和HTML：

<ul id="menu" data-turbolinks-permanent> 
    <li class="menu-item underline"><%= link_to 'Item1', root_url %></li> 
    <li class="menu-item underline"><a href="#">Item2</a></li> 
    <li class="menu-item underline"><a href="#">Item3</a></li> 
    <li class="menu-item underline"><a href="#">Item4</a></li> 
    <li class="menu-item underline"><a href="#">Item5</a></li> 
    <li class="slider"></li> 
</ul>

而CSS（薩斯）

.slider 
    display: block 
    position: absolute 
    bottom: 0 
    left: 0 
    height: 4px 
    width: 90px 
    background: black 
    transition: all .3s linear

來源

2017-02-25 Sanek

你爲什麼不使用這個偉大的框架？ materializecss.com/tabs.html

無論如何，如果您真的想自己製作這些，請將n個寬度爲100vw的標籤放在一起，並在標頭中創建n個元素。使用jQuery滑動效果和純粹的id爲hrefing onClick效果。

來源

2017-02-25 15:25:19

Rails 5中的材質選項卡與Turbolinks

回答

相關問題