Javascript或jQuery插件或滑动标签头的技巧[关闭]答案

【问题标题】：Javascript or jQuery Plugin or trick to slide tab head [closed]Javascript或jQuery插件或滑动标签头的技巧[关闭]
【发布时间】：2014-12-09 08:23:07
【问题描述】：

我有这个标签：

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

【问题讨论】：

标签： javascript jquery css tabs slide

【解决方案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>

【讨论】：