Question

我是Qjuery的新手并且正在努力学习以完成我的网站。

前段时间，sg3s写了一个最优秀的小提琴，完成了我所寻找的大部分内容。这是：http://jsfiddle.net/sg3s/RZpbK/

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

}）;

我想对此进行两到三次更改，并且我在周末的大部分时间都试图弄清楚这一点并没有成功。

1：有一个可以完全关闭面板的第四个触发器（可能是＆＃34; trigger0＆＃34;）。上一个面板将关闭，除非有人触发除trigger0之外的其他触发器之一，否则不会打开任何新面板。

2：我想在触发按钮中添加背景图像，以表明它已被选中。

3：我不知道是否可以这样做，或者这只是JQuery的副产品。如果您可以按一下后退按钮返回上一页，而不是按下触发按钮的次数相同，那就太好了。

任何这些项目的任何帮助将不胜感激，鲍勃

Answer 1

迟到的答案，但我认为这将解决您上面的问题

添加一个新面板并使其隐藏具有'.active'类集的面板，请参阅小提琴代码
我添加了背景颜色（使用相同类型的代码轻松更改为图像，我只是没有图像方便）。在点击功能中，首先使用$('a.panel').css('background', '');删除所有背景，然后在当前点击的项$(this).css('background', 'red');上设置背景
向您点击事件功能添加event.preventDefault();，这将禁用href的默认行为（导航到href）。从而保持历史清洁，“后退按钮将带您回到上一页。

基于你问题中的那个小提琴

<强> http://jsfiddle.net/7YHFa/

修改JQuery滑动面板例程

1 个答案: