Question

我为jQuery手风琴菜单编写了一个脚本。目前它的工作方式是有四个不同的菜单按钮，当你点击每个菜单按钮时，会显示一个新的部分。我想改变剧本，以便只有两个按钮可以将手风琴向前移动，一个向后移动。因此，如果有五个不同的部分，则一个按钮前进到下一个部分，一个按钮前进到前一个部分。我知道这涉及.each函数，但我不确定如何集成它。下面是我当前的脚本和HTML。

$(document).ready(function() {
            $('.tabs a').click(function(){
                var $this = $(this);
                $('.panel').hide();
                $('.tabs a.active').removeClass('active');
                $this.addClass('active').blur();
                var panel = $this.attr('href');
                $(panel).fadeIn(1300);
                return false;
            });//end click
            $('.tabs li:first a').click();
        }); // end ready

<ul class="tabs"><!--Added class tabs and panel 1, 2, 3, 4-->
            <li><a href="#panel1" class="">Home</a></li>
            <li><a href="#panel2" class="">About</a></li>
            <li><a href="#panel3" class="">Work</a></li>
            <li><a href="#panel4" class="">Contact Me</a></li>
        </ul>

 <div class='panel' id='panel1'>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
            </p>
        </div>

        <div class='panel' id='panel2'>
            <p>hi
            </p>
        </div>

        <div class='panel' id='panel3'>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
            </p>
        </div>

        <div class='panel' id='panel4'>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
            </p>
        </div>

        <div class='panel' id='panel5'>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
            </p>
        </div>

Answer 1

试试这个 http://jsfiddle.net/69D96/

HTML

<ul>
    <li><a class="control" id="prev" href="#">Prev</a></li>
    <li><a class="control" id="next" href="#">Next</a></li>
</ul>

<div class='panel' id='panel1'>
 1
</div>

<div class='panel' id='panel2'>
2
</div>

<div class='panel' id='panel3'>
 3  
</div>

<div class='panel' id='panel4'>
4
</div>

和JavaScript

$(document).ready(function() {
    $('.control').click(function(){
        //handle click
        var $this = $(this);
        $('.panel').hide();

        var panel = $this.attr('href');
        $(panel).fadeIn(1300);

        // update href of next and prev
        var panelCount = $('.panel').size();
        var panelI = parseInt( panel.replace('#panel','') );
        var prevI = panelI -1;
        if (prevI <1 ) prevI=1;
        var nextI = panelI +1;
        if( nextI >= panelCount) nextI = panelCount -1;

        $('#prev').attr('href', '#panel' + prevI);
        $('#next').attr('href', '#panel' + nextI);        

        return false;
    }).eq(0).attr('href', '#panel1').click(); 

});

如何使用两个按钮制作手风琴？

1 个答案: