Question

我有一些麻烦试图让它工作，我是javascript的新手，我很确定我需要它。我想让我的背景图像在悬停时滑动，并在选中时保持活动在正确的div上。我目前拥有的html，css和javascript智能工作完美... javascript部分是当用户点击div时，一个容器在它下面打开 - 它应该工作，但是，我不知道如何集成给予初始div a.active在该div上保持活跃而不是总是回到中心。任何想法，建议和/或帮助将不胜感激。

更新：以下是http://jsfiddle.net/mGQ8w/4/

提供的内容

这是我到目前为止所得到的：

HTML

<div id="profile_selection">
    <a href="#nos_profiles" class="profile_selection">
        {ÑØ§}<br />Members
    </a>
    <a href="#registered_profiles" class="profile_selection">
        Registered<br />Members
    </a>
    <a href="#team_profiles" class="profile_selection">
        Team<br />Profiles
    </a>
    <div id="profile_selection_slider"></div>
</div>

<div id="nos_profiles" class="selection"></div>

<div id="registered_profiles" class="selection"></div>

<div id="team_profiles" class="selection"></div>

CSS

#profile_selection {
    width: 612px;
    height: 152px;
    padding: 0;
    margin: 15px auto;
    position: relative;
}
#profile_selection a {
    width: 200px;
    height: 105px;
    padding: 45px 0 0 0;
    margin: 0;
    background: #333;
    border: 2px solid #444;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    float: left;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    color: #FFF;
    font: 24px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
    position: relative;
    z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
    height: 100px;
    padding: 50px 0 0 0;
    background: #222;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    color: #DF7401;
}
#profile_selection_slider {
    width: 64px;
    height: 16px;
    background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    position: absolute;
    top: 152px;
    left: 275px;
    z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider {
    left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider {
    left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider {
    left: 480px;
}
#nos_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}
#registered_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}
#team_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}

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)
        };
    });
});

最新更新:::::

http://jsfiddle.net/mGQ8w/13/

一旦用户决定点击不同的div，是否可以将其设置为，当新选择的div变为活动状态时，活动类是否恢复正常？它现在的方式是，如果你点击全部3，它们都会变为活动状态....我想它只有1个活动 - 用户点击的那个....所以如果用户点击在NOS成员div上，它变为活动状态，然后如果用户点击注册成员，NOS成员不再有效，但注册成员div是......

Answer 1

您需要使用active＆amp;添加addClass课程。可以使用active删除之前选择中的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;
}

选中此http://jsfiddle.net/mGQ8w/14/

Answer 2

为.active提供与:hover相同的规则，例如：

#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
});

以下是一个小提琴：http://jsfiddle.net/n1ck/FbeFU/

使用背景图片幻灯片进行活动

2 个答案: