javascript - making a.active work with background image slide

Question

I am having some troubles trying to get this to work, I'm new to javascript, and am pretty sure I'd need it for this. I'd like to have my background image slide upon hover and stay active on its correct div when selected. What I currently have html, css, and javascript wise works perfectly...javascript part is when user clicks on the div, a container opens up below it - that works as it should, however, I have no idea how to integrate giving the initial div a.active to stay active on that div rather than always going back into the center. Any ideas, suggestions, and/or help would be much appreciated.

UPDATE: Here is a jsfiddle of what is provided below: http://jsfiddle.net/mGQ8w/4/

This is what I got so far:

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

LATEST UPDATE:::::

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

Is it possible to make it where once a user decides to click a different div, the active class goes back to normal while the new selected div becomes active? The way it is now, is that if you click on all 3, they all become active....I'd like it where only 1 is active - the one that a user clicks on....so if a user clicks on the NOS Members div, it becomes active, then if the user clicks on Registered Members, the NOS members is no longer active, but the Registered Members div is...

score 6 · Accepted Answer

您需要active使用 & 添加类，可以使用删除从先前选择addClass中删除的类。activeremoveClass

$(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/

score 2 · Accepted Answer

给出与.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/

javascript - making a.active work with background image slide

2 回答 2

Related

Reference