使背景圖片幻燈片製作a.active工作

Question

我有一些麻煩試圖讓這個工作，我是新來的JavaScript，我很確定我會需要它。我希望在懸停時滑動背景圖片，並在選中時保持其正確的div。我目前有什麼HTML，CSS和JavaScript明智的作品完美... JavaScript的一部分是當用戶點擊該div，一個容器打開它下面 - 它的作品，因爲它應該，但我不知道如何整合給予初始分區a.active保持對該分區的活躍，而不是始終回到中心。任何想法，建議和/或幫助將不勝感激。

UPDATE： 這裏是提供如下的的jsfiddle：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變得活躍？現在的方式是，如果你點擊所有3，它們全部變成活動的......我希望它只有1個活動 - 用戶點擊的那個....所以如果用戶點擊對NOS成員DIV，它變得活躍，那麼如果用戶點擊註冊會員，該會員NOS不再有效，但註冊會員DIV是...

Answer 1

您需要添加使用addClass &的active類可以刪除使用removeClass從以前的選擇中刪除active類。

$(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提供如下

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

檢查CSS的變化而使用該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/