Javascript 使用背景图像幻灯片制作活动幻灯片

我在尝试让它工作时遇到了一些困难，我对javascript还不熟悉，我非常确定我需要它来完成这项工作。我想让我的背景图像在悬停时滑动，并在选中时在其正确的div上保持活动状态。我目前拥有的html、css和javascript功能非常完美……javascript部分是当用户单击div时，它下面会打开一个容器——这是应该的，但是，我不知道如何集成初始div a.active以在该div上保持活动，而不是始终返回到中心。如有任何想法、建议和/或帮助，将不胜感激

更新： 下面是一个JSF示例，其中包括以下内容：

到目前为止，我得到的是：

HTML

JAVASCRIPT

$(document).ready(function () {
    $('a.profile_selection').click(function () {
        var a = $(this);
        var selection = $(a.attr('href'));
        selection.removeClass('selection');
        $('.selection').hide();
        selection.addClass('selection');
        if (selection.is(':visible')) {
            selection.slideToggle(400)
        } else {
            selection.slideToggle(400)
        };
    });
});

最新更新：

---

当用户决定单击不同的div时，当新选择的div变为活动时，活动类是否可以恢复正常？现在的情况是，如果你点击所有3个，它们都会变为活动状态…我希望只有1个是活动的-用户点击的那一个…因此如果用户点击NOS Members div，它会变为活动状态，然后如果用户点击注册成员，NOS成员不再活动，但是注册成员div是…

您需要使用

addClass

添加

活动的
类，您可以使用
removeClass
从以前的选择中删除
活动的
类

$(document).ready(function(){
    $('a.profile_selection').click( function(){
       var a = $(this) ;
       $('a.profile_selection').removeClass('active');
       $(this).addClass('active');
       var selection = $( a.attr('href') );
       selection.removeClass('selection');
       $('.selection').hide();
       selection.addClass('selection');
       if( selection.is(':visible') ){
           selection.slideToggle(400)
       }else{ 
           selection.slideToggle(400)
       };
    });
});

这需要与@N1ck提供的css更改一起使用，如下所示

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider {
    left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider {
    left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider {
    left: 480px;
}

选中此项
为
.active
提供与对
相同的规则：悬停
，例如：

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider{
    left: 71px;
}

变成

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{
    left: 71px;
}

然后使用
.active
类切换所选菜单项

var menuItems = $('a.profile_selection');

menuItems.on('click', function () {
    var a = $(this),
        selection = $(a.attr('href'));

    menuItems.removeClass('active');
    a.toggleClass('active');

    ...etc
});

这里有一个fiddle作为示例：
您错过了jquery库。这不是答案，我只是想告诉您更新js fiddle链接，并在Frameworks and Extensions下选择jquery，这样它就不会在您的fiddle上抛出“$is not defined”错误。。谢谢差不多就这样了…我的背景图像是“#profile_selection_slider”，它需要与活动类保持一致-如何？您希望滑块在所选选项上处于活动状态，并且应该出现悬停效果。如果选择了“第一”，则它下面会有一个滑块，如果将鼠标悬停在“第二”，另一个滑块也会显示在它下面？这是要求吗？是的，当您将鼠标悬停在3个div容器上时，滑块背景图像将滑动-单击其中一个容器时，滑块背景图像将保持活动状态，滑块背景图像将保持在所选div的下方。然后实现另一个javascript，单击其中一个div就会打开一个容器。我想N1ck的答案很好：）事实上，我的错误——如果运行最新的jquery库，这会起作用，不幸的是，我运行的是1.3.2版本——有没有办法让Nick在1.3.2中所做的工作成功？太棒了，谢谢；）
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{
    left: 71px;
}

var menuItems = $('a.profile_selection');

menuItems.on('click', function () {
    var a = $(this),
        selection = $(a.attr('href'));

    menuItems.removeClass('active');
    a.toggleClass('active');

    ...etc
});