javascript 或 css - 几乎可以工作，遇到一些障碍

Question

下面我将提供我目前拥有的代码 - html、css 和 javascript。除一件小事外，一切正常，我似乎无法弄清楚。我对 javascript 还是很陌生，我认为需要 javascript 才能使这项工作正常进行，如果不是-它必须在我的 css 中...

如果单击标题为(NoS Members)、(Registered Members)和(Team Profiles)的每个 div，您将看到 slider 背景图像(小三 Angular 形)起作用并且在单击三个中的任何一个时处于事件状态div - 这样做会在其下方打开另一个容器。一切正常，但是，我遇到的问题是，如果您首先单击(NoS Members)，然后按顺序向右移动并单击第二个(注册成员(member))，或者最后一个(团队资料)，然后尝试单击第二个 - (注册成员)或第一个 - (NoS 成员)， slider 无法返回向左滑动。它似乎只有在发生点击后才向右滑动。

这是我得到的一个 jsfiddle: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;
}

Javascript

$(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 帮助我解决了一个与此相关的不同问题。

Answer 1

我对上面的代码做了一些改动并更新了 fiddle Fiddle Here

 $(document).ready(function(){
var clicked;
$('a.profile_selection').click( function(){
   var a = $(this);
    clicked=$(this);
 $('a.profile_selection').not(clicked).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)
    };
});
$('a.profile_selection').hover(function(){
var a = $(this);
   $('a.profile_selection').not(clicked).removeClass('active');
   $(this).addClass('active');
  })
});