Javascript 在表格中滚动选项卡
我有一个水平标签菜单。这些选项卡都是li元素。我总是一次展示其中的5个。在左边和右边，我有按钮可以将这些标签滚动到任意一边。我只是不知道如何才能做到这一点。我可以把接下来的5个标签放在一个不同的div中吗？那不是最好的解决办法，是吗？我可以用JavaScript或jQuery来实现这一点吗Javascript 在表格中滚动选项卡,javascript,jquery,Javascript,Jquery,我有一个水平标签菜单。这些选项卡都是li元素。我总是一次展示其中的5个。在左边和右边，我有按钮可以将这些标签滚动到任意一边。我只是不知道如何才能做到这一点。我可以把接下来的5个标签放在一个不同的div中吗？那不是最好的解决办法，是吗？我可以用JavaScript或jQuery来实现这一点吗 谢谢。虽然我不确定该选项卡的外观如何，但我假设有5个选项卡，您将显示不同的页面内容集 我建议使用Javascript实现一个简单的解决方案（设计）。看看它是否有效 有一个变量来存储当前视图索引。e、 g._当
谢谢。虽然我不确定该选项卡的外观如何，但我假设有5个选项卡，您将显示不同的页面内容集 我建议使用Javascript实现一个简单的解决方案（设计）。看看它是否有效
请查看这是否对您有帮助。您可以通过jQuery完成此操作。如果所有选项卡的宽度相同，则更容易。您可以将UL定位在具有overflow:hidden和position:relative的DIV内。然后UL可以使用animate（）方法（或css（）方法）在DIV内部滑动。在网上查看它们 下面是一个例子：
<!DOCTYPE HTML>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
body { padding: 30px; }
div#tabs { width: 360px; height: 30px; overflow: hidden; position: relative; }
ul { display: block; float: left; width: 1080px; position: absolute; left: -360px; }
li { display: block; float: left; width: 70px; height: 30px; font-size: 12px; border: 1px solid #333; }
button { float: left; width: 100px; margin: 20px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
var tabs_list = $("div#tabs > ul");
if($(this).is("#left"))
{
tabs_list.animate({ left: "-=360" }, 500);
}
else if($(this).is("#right"))
{
tabs_list.animate({ left: "+=360" }, 500);
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
<li><a href="#">seven</a></li>
<li><a href="#">eight</a></li>
<li><a href="#">nine</a></li>
<li><a href="#">ten</a></li>
<li><a href="#">eleven</a></li>
<li><a href="#">twelve</a></li>
<li><a href="#">thirteen</a></li>
<li><a href="#">fourteen</a></li>
<li><a href="#">fifteen</a></li>
</ul>
</div>
<button id="left">scroll left</button>
<button id="right">scroll right</button>
</body>
</html>
*{边距：0；填充：0；}
正文{padding:30px；}
div#tabs{宽度：360px；高度：30px；溢出：隐藏；位置：相对；}
ul{显示：块；浮动：左；宽度：1080px；位置：绝对；左：-360px；}
li{显示：块；浮动：左；宽度：70px；高度：30px；字体大小：12px；边框：1px实心#333；}
按钮{浮动：左；宽度：100px；边距：20px；}
$（文档）.ready（函数（）
{
$（“按钮”）。单击（函数（）
{
var标签列表=$（“div标签>ul”）；
如果（$（此）.is（“#左”））
{
制表符列表。动画（{左：“-=360”}，500）；
}
else if（$（this）.is（“#right”））
{
制表符列表。动画（{左：“+=360”}，500）；
}
});
});
向左滚动
向右滚动
当您到达选项卡列表的开头或结尾时，这需要更多的工作才能取消激活或隐藏滚动按钮，但这应该可以让您开始了。我喜欢Elliot的解决方案。我还有一个，如果标签长度不同，它就可以工作。它通过在单击“右”和“左”按钮时隐藏和显示单个“li”来实现。代码还负责一次左右移动卡舌5，并处理端箱
<!DOCTYPE HTML>
<html>
<head>
<style>
#left, #right {float: left; position: relative; margin: 0; padding: 0;}
#tabs {float: left; position: relative; list-style: none; margin: 0; padding: 0;}
#tabs li {float: left; display: none; border: 2px solid #000; width: 50px; text-align: center;};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tabs = $('#tabs li'), number_of_tabs = tabs.length;
var tabs_visible = Math.min(5, number_of_tabs), low_tab = 0, high_tab = (tabs_visible - 1);
$(tabs).filter(function(index){return (index < tabs_visible);}).show();
$('#left, #right').each(function(){
$(this).click(function(){
if ($(this).is('#right')) {
var high_tab_new = Math.min((high_tab + tabs_visible), (number_of_tabs - 1));
var low_tab_new = high_tab_new - tabs_visible + 1;
$(tabs).filter(function(index){
return (index >= low_tab) && (index < low_tab_new);
}).hide();
$(tabs).filter(function(index){
return (index > high_tab) && (index <= high_tab_new);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
} else {
var low_tab_new = Math.max((low_tab - tabs_visible), 0);
var high_tab_new = low_tab_new + tabs_visible - 1;
$(tabs).filter(function(index){
return (index > high_tab_new) && (index <= high_tab);
}).hide();
$(tabs).filter(function(index){
return (index >= low_tab_new) && (index < low_tab);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
}
});
});
</script>
</head>
<div id="nav3">
<button id="left">left</button>
<ul id="tabs">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
</ul>
<button id="right">right</button>
</div>
</body>
</html>
#左，#右{浮点：左；位置：相对；边距：0；填充：0；}
#制表符{浮动：左；位置：相对；列表样式：无；边距：0；填充：0；}
#标签li{浮动：左；显示：无；边框：2px实心#000；宽度：50px；文本对齐：中心；}；
$（文档）.ready（函数（）{
var tabs=$（'#tabs li'），_tabs的数量=tabs.length；
var tabs\u visible=Math.min（5，tabs的数量），low\u tab=0，high\u tab=（tabs\u visible-1）；
$（制表符）.filter（函数（索引）{return（索引=低位选项卡）和&（索引<低位选项卡>新建）；
}).hide（）；
$（制表符）.过滤器（函数（索引）{
返回（索引>高选项卡）和&（索引高选项卡新）和&（索引=低选项卡新）和&（索引<低选项卡）；
}).show（）；
low_tab=low_tab_new；
high_tab=high_tab_new；
}
});
});
左边
正确的