Javascript或jQuery插件或技巧滑动标签头

Question

我有这个标签：

当用户单击右侧的箭头按钮时，是否有任何JS或jquery插件或者只是一个技巧来操作，标签的头部（而不是内容）向左滑动，因此可以显示隐藏的选项卡？

Answer 1

您可以使用插件，但我不是来为您找到一个插件 相反，我将向您展示如何在几个jQuery行中完成它。

您需要设置溢出的UL元素并为其scrollLeft位置设置动画。
跟踪元素是否滚动到最大值的一种方法 - 在将位置重置为0之前是计算（伪：）

ULScrollWidth - ULcurrentScrollleftPos === ULwidth ?

你走了：

var $navUl = $('nav ul');
$navUl[0].scrollLeft = 0;

$('nav > span').click(function(){
  var x = $navUl[0].scrollWidth - $navUl[0].scrollLeft <= $navUl.innerWidth() ? 0 : "+=100";
  $navUl.animate({scrollLeft : x});
}); 

nav{
  position:relative;
  margin:0 auto;
  width:450px;
}
nav > span{
  position:absolute;
  top:0;
  right:0;
  background:#ddf;
  height:100%;
  line-height:80px;
  width:50px;
  text-align:center;
}
#navi{
  overflow:hidden;
  width:400px;
  padding:0;
  background:#eee;
  white-space:nowrap;
}
#navi li {
  display:inline-block;
  padding:30px;
  border-right:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="navi">
    <li>Home</li>
    <li>About</li>
    <li>Work</li>
    <li>Music</li>
    <li>Behance</li>
    <li>Dribbble</li>
    <li>Linked</li>
    <li>Contact</li>
  </ul>
  <span>&raquo;</span>
</nav>