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>

​