自造的多tab页情况下的切换_tabs太多如何翻页-优快云博客

本文链接：https://blog.youkuaiyun.com/yunzhilongteng/article/details/52108230

本文介绍了一个使用JavaScript实现的Tab标签管理方案，当Tab数量超过显示限制时，通过隐藏部分Tab并提供左右滑动来切换显示的功能。代码示例中包含了添加、移除Tab及滑动切换的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>