Question

我有一个水平标签菜单。这些选项卡都是li元素。我一次显示其中的5个。在左侧和右侧，我有按钮，将这些标签滚动到任一侧。我只是不确定如何实现这一目标。我可以将下面的5个标签放在不同的div中，点击后会显示吗？那不是最好的解决方案，不是吗？我可以用JavaScript或jQuery以某种方式做到这一点吗？

感谢。

Answer 1

你可以用wQuery做这个。如果所有选项卡的宽度相同，则更容易。您可以将UL定位在具有溢出的DIV内：隐藏和位置：相对。然后UL可以使用animate（）方法（或css（）方法）在DIV内部滑动。在http://api.jquery.com上查看它们。

以下是一个例子：

<!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>

当你到达选项卡列表的开头或结尾时，这需要更多的工作才能取消激活或隐藏滚动按钮，但这应该让你开始。

Answer 2

我喜欢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>

Answer 3

虽然我不确定选项卡的外观如何，但我假设您使用5个选项卡显示不同的页面内容。

我建议使用Javascript进行简单的解决方案（Design）。看看它是否有效。

有一个变量来存储当前的View索引。例如_currentView。
将5个标签的内容放在5个视图中（当我说视图时，有很多方法可以建立它，从使用div对象到使用.net多视图控件）。
默认情况下，请保持其可见性。
创建一个方法，即接受_currentView作为参数。在此方法中，只需使当前视图可见。
单击左右箭头，递增或递减_currentView值并调用激活当前视图的方法。

请查看这是否对您有所帮助。

滚动表格中的选项卡

3 个答案: