Question

我有一个包含不同类别的标签菜单：

    <ul class="feed-tabs">
       <li>category1</li>
       <li>category2</li>
       <li>category3</li>
       <li>category4</li>
       <li>category5</li>      
    </ul>

当我在标签中单击时，它会显示相应的div：

<div id="feeds-container">
    <div class="feed-category1">
        <div><p >cat1-1</p></div>
        <div><p >cat1-2</p></div>
        <div><p >cat1-3</p></div>
        <div><p >cat1-4</p></div>           
    </div>      
    <div class="feed-category2">
        <div><p >cat2-1</p></div>
        <div><p >cat2-2</p></div>
        <div><p >cat2-3</p></div>
        <div><p >cat2-4</p></div>           
    </div>
    <div class="feed-category3">
        <div><p >cat3-1</p></div>
        <div><p >cat3-2</p></div>
        <div><p >cat3-3</p></div>
        <div><p >cat3-4</p></div>           
    </div>
    <div class="feed-category4">
        <div><p >cat4-1</p></div>
        <div><p >cat4-2</p></div>
        <div><p >cat4-3</p></div>
        <div><p >cat4-4</p></div>           
    </div>
</div>

在div中我想使用这个函数：

<script type="text/javascript">
    $(document).ready(function(){

        var first = 0;
        var speed = 400;
        var pause = 3500;

        function removeFirst(){
            first = $('div.feed-category1 div:first').html();
            $('div.feed-category1 div:first')
            .animate({opacity: 0}, speed)
            .fadeOut('100', function() {$(this).remove();});
            addLast(first);
        }

        function addLast(first){
            last = '<div style="display:none">'+first+'</div>';
            $('div.feed-category1').append(last)
            $('div.feed-category1 div:last')
            .animate({opacity: 1}, speed)
            .fadeIn('1000')
        }

        interval = setInterval(removeFirst, pause);
    });
</script>

作为新闻自动收报机。现在它只适用于'feed-category1'，因为它在jquery函数中硬编码。

如何让它适用于所有类别。

示例代码是这样的：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script type="text/javascript" src="http://static.cdncast.com/anyblog/frontpagev2/js/jquery.tools.min.js"></script>

    <style>
        ul.feed-tabs { list-style:none; }
        ul.feed-tabs li { float: left; text-decoration: none; padding: 0 20px; cursor: pointer; }
        hr { clear:both; }
    </style>

    <script type="text/javascript">
        $(function() {
            $("ul.feed-tabs").tabs("#feeds-container > div", { effect: 'fade', fadeInSpeed : 700, current : 'current', tabs : 'li' });
        });

        $(document).ready(function(){

            var first = 0;
            var speed = 400;
            var pause = 3500;

            function removeFirst(){
                first = $('div.feed-category1 div:first').html();
                $('div.feed-category1 div:first')
                .animate({opacity: 0}, speed)
                .fadeOut('100', function() {$(this).remove();});
                addLast(first);
            }

            function addLast(first){
                last = '<div style="display:none">'+first+'</div>';
                $('div.feed-category1').append(last)
                $('div.feed-category1 div:last')
                .animate({opacity: 1}, speed)
                .fadeIn('1000')
            }

            interval = setInterval(removeFirst, pause);
        });
    </script>

</head>
<body>
    <div id="header">
        <ul class="feed-tabs">
           <li>category1</li>
           <li>category2</li>
           <li>category3</li>
           <li>category4</li>
           <li>category5</li>      
        </ul>
    </div>
    <hr>
    <div id="feeds-container">
        <div class="feed-category1">
            <div><p >cat1-1</p></div>
            <div><p >cat1-2</p></div>
            <div><p >cat1-3</p></div>
            <div><p >cat1-4</p></div>           
        </div>      
        <div class="feed-category2">
            <div><p >cat2-1</p></div>
            <div><p >cat2-2</p></div>
            <div><p >cat2-3</p></div>
            <div><p >cat2-4</p></div>           
        </div>
        <div class="feed-category3">
            <div><p >cat3-1</p></div>
            <div><p >cat3-2</p></div>
            <div><p >cat3-3</p></div>
            <div><p >cat3-4</p></div>           
        </div>
        <div class="feed-category4">
            <div><p >cat4-1</p></div>
            <div><p >cat4-2</p></div>
            <div><p >cat4-3</p></div>
            <div><p >cat4-4</p></div>           
        </div>
    </div>
</body>
</html>

Answer 1

看看这个：

http://jsfiddle.net/dgH3S/

我将removeFirst修改为以下代码并完全删除了其他方法。诀窍是我直接遍历div内的所有#feeds-container并使用this单独定位每个function removeFirst() { $("#feeds-container > div").each(function() { first = $(this).find('div:first').animate({ opacity: 0 }, speed).fadeOut('100', function() { $(this).appendTo($(this).parent()).animate({ opacity: 1 }, speed).fadeIn('1000'); }); }); }。我做的另一个修改是简单地移动元素而不是删除它并每次创建一个新元素。

not(":hidden")

或者，为了获得更好的性能，您可能只想定位活动选项卡，而不是为所有选项卡设置动画，即使它们未显示也是如此。我不太清楚该库是否足以告诉您如何确定哪些是活动的（可能只能使用{{1}}）。

根据所选选项调用jquery函数

1 个答案: