带有Turbolinks的Rails 5中的材质选项卡

Question

我想做这样的事情:在我的Rails应用程序中使用http://www.jqueryscript.net/demo/Material-Design-Sliding-Tab-Menu-With-jQuery-CSS3/作为菜单。滑块(下划线)的滑动动画应该会播放，页面应该会同时加载。

我设法让滑块在我点击的链接下移动，方法是将菜单设置为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 (Sass)

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

Answer 1

你为什么不使用这个伟大的框架呢？materializecss.com/tabs.html

无论如何，如果你真的想自己制作这些标签，可以将n个宽度为100vw的标签并排放在一起，并在标题中创建n个元素。滑动效果使用jquery，onClick效果使用纯id hrefing。