3

我是 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();
    }
});

});​</p>

我想对此进行两到三个更改，我花了整个周末的大部分时间试图解决这个问题，但没有成功。

1：有一个可以完全关闭面板的第四个触发器（可能是“trigger0”）。前一个面板将关闭，并且不会打开新面板，除非有人点击了触发器 0 之外的其他触发器之一。

2：我想给触发按钮添加背景图片，表示它被选中。

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

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

4

1 回答 1

1

一个迟到的答案，但我认为这会解决你上面的问题

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

小提琴基于你的问题

http://jsfiddle.net/7YHFa/

于 2013-02-01T18:47:47.210 回答