JavaScript 或 CSS - 几乎可以工作，遇到一些障碍

下面我将提供我目前拥有的代码 - html，css和javascript。 除了一件小事外，一切都正常工作，我似乎无法弄清楚。 我对 javascript 仍然相当陌生，并认为需要 javascript 来完成这项工作，如果没有 - 它必须在我的 css 中......

如果您单击每个带有标题（NoS 成员）、（注册成员）和（团队配置文件）的div，您将看到滑块背景图像（小三角形）工作并在单击三个div 中的任何一个时处于活动状态 - 这样做会打开它下面的另一个容器。 这一切都完美无缺，但是，我遇到的问题是，如果您先单击（NoS 成员）一个，然后依次向右并单击第二个 - （注册成员）或最后一个（团队资料），然后尝试单击第二个 - （注册成员）或第一个 - （NoS 成员）， 滑块向左滑动时不起作用。 它似乎只有在单击发生后才能向右滑动。

这是我得到的jsfidd：http://jsfiddle.net/5DTKH/

法典：

.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;
}
/* ===== Start of 'Profile - Selection - Slider' ===== */
#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, #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; }
/* ===== Start of 'NoS - Profiles' ===== */
#nos_profiles {
  width: 950px;
  height: 520px;
  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: -15px;
  z-index: 1;
}
/* ===== Start of 'Registered - Profiles' ===== */
#registered_profiles {
  width: 950px;
  height: 520px;
  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: -15px;
  z-index: 1;
}
/* ===== Start of 'Team - Profiles' ===== */
#team_profiles {
  width: 950px;
  height: 520px;
  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: -15px;
  z-index: 1;
}

爪哇语

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

任何帮助将不胜感激 - 不确定这是否重要，但我正在使用 jquery 库 1.3.2 - 我知道它已经过时了，但它就是这样......

最后，我确实想再次感谢Ashis和Nick帮助我解决与此相关的另一个问题。