版权声明:如果有帮助的话,转载前记得告诉我一声 https://blog.csdn.net/yunzhilongteng/article/details/52108230
ScrollTab.js
var LeftInvisibleCount=0;
var RightInvisibleCount=0;
function AddWorkflowTab(newTab) {
// body...
var tabcounts = $('ul.nav.nav-tabs').children().length;
if(tabcounts<=5)
{
$('ul.nav.nav-tabs').append(newTab);
}
else
{
ToTheRightForAdd();
$($('ul.nav.nav-tabs').children().get(LeftInvisibleCount)).css('display','none');
LeftInvisibleCount++;
$('ul.nav.nav-tabs').append(newTab);
$('#TabLeftShift').css('display','inherit');
$('#TabRightShift').css('display','inherit');
}
}
function RemoveWorkflowTab(tabId)
{
$(tabId).remove();
if(RightInvisibleCount>0)
{
$('ul.nav.nav-tabs').children().get($('ul.nav.nav-tabs').children().length-1-RightInvisibleCount).css('display','inherit');
}
if($('ul.nav.nav-tabs').children().length<=6)
{
$('#TabLeftShift').css('display','none');
$('#TabRightShift').css('display','none');
}
}
function LeftShift()
{
if(LeftInvisibleCount>0)
{
$($('ul.nav.nav-tabs').children().get($('ul.nav.nav-tabs').children().length-1-RightInvisibleCount)).css('display','none');
RightInvisibleCount++;
$($('ul.nav.nav-tabs').children().get(LeftInvisibleCount-1)).css('display','inherit');
LeftInvisibleCount--;
}
}
function RightShift()
{
if(RightInvisibleCount>0)
{
$($('ul.nav.nav-tabs').children().get(LeftInvisibleCount)).css('display','none');
LeftInvisibleCount++;
$($('ul.nav.nav-tabs').children().get($('ul.nav.nav-tabs').children().length-RightInvisibleCount)).css('display','inherit');
RightInvisibleCount--;
}
}
function ToTheRightForAdd()
{
while(RightInvisibleCount>0)
{
$($('ul.nav.nav-tabs').children().get(LeftInvisibleCount)).css('display','none');
LeftInvisibleCount++;
$($('ul.nav.nav-tabs').children().get($('ul.nav.nav-tabs').children().length-RightInvisibleCount)).css('display','inherit');
RightInvisibleCount--;
}
}
设置显示的tab数目,超过数量时隐藏,提供左右滑动
index.js
$(document).ready(function()
{
$('#add').on('click',function()
{
var newTab='<li><a href="#">SVN</a></li>';
AddWorkflowTab(newTab);
});
$('#TabLeftShift').on('click',LeftShift);
$('#TabRightShift').on('click',RightShift);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css"/>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="ScrollTab.js"></script>
</head>
<body>
<span id="TabLeftShift" style="display:block"><<</span>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<span id="TabRightShift" style="display:block">>></span>
<input type="button" name="" value="add" id="add"/>
</body>
</html>