jquery - 修改JQuery滑动面板例程

Question

我是 Qjuery 的新手，正在尝试学习足够的知识来完成我的网站。

不久前，sg3s 写了一个最优秀的 fiddle ，它可以完成我正在寻找的大部分功能。这是: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:有第四个触发器(可能是“trigger0”)，可以完全关闭面板。上一个面板将关闭，并且不会打开新面板，除非有人按下除 trigger0 之外的其他触发器之一。

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

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

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

Answer 1

答案很晚，但我认为这会解决您上面的问题

1. 添加一个新面板并隐藏带有“.active”类集的面板，请参阅 fiddle 代码
2. 我添加了背景颜色(使用相同类型的代码轻松更改为图像，我只是手头没有图像)。在 Click 函数中，首先使用 $('a.panel').css('background', ''); 删除所有背景，然后在当前单击的项目上设置背景 $(this) .css('背景', '红色');
3. 将 event.preventDefault(); 添加到您的点击事件函数中，这将禁用 href 的默认行为(导航到该 href)。从而使您的历史记录保持干净，“后退”按钮将带您返回上一页。

根据您的问题进行 fiddle

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