javascript或css-几乎正常工作，遇到一些障碍

下面我将提供我目前拥有的代码——html、css和javascript。除了一件小事之外，一切都正常，我似乎想不出来。我对javascript还是相当陌生的，我认为javascript是实现这一点所必需的，如果不是的话——它必须在我的css中

如果您单击标题为（NoS成员）、（注册成员）和（团队配置文件）的每个div，您将看到滑块背景图像（小三角形）在单击三个div中的任何一个时工作并处于活动状态，这样做会打开其下方的另一个容器。但是，我遇到的问题是，如果您先单击（NoS成员）一个，然后向右，然后单击第二个（注册成员）或最后一个（团队配置文件），然后尝试单击第二个（注册成员）或第一个（NoS成员），滑块无法向后滑动到左侧。它只在单击后向右滑动时才起作用

以下是我得到的一部分：

代码：

HTML

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

我对上述代码做了一些更改，并更新了小提琴

---

我对上面的代码做了一些修改，并更新了fiddle

---

您可以将css第53行更改为55行

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

对此

#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider { left: 275px; }
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider { left: 480px; }

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

因此：悬停可以工作，即使其他#profile_选择处于活动状态

---

您可以将css第53行更改为55行

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

对此

#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider { left: 275px; }
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider { left: 480px; }

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

因此：悬停可以工作，即使其他#profile_选择处于活动状态

---

在Chrome 27.0.1453.116中对我来说很好。单击标题为（团队简介）的第三个div后，背景图像是否会滑回左侧？它不工作…在Chrome 27.0.1453.116中对我来说工作正常。在单击标题为（团队简介）的第三个div后，背景图像是否会滑回左侧？它不工作…这是非常接近-我希望悬停停留（在地方）一旦div被点击，但仍然有能力悬停在其他2个选项与滑块移动，直到另一个div被点击…这有意义吗？我给了你一个加号的帮助，但是我的问题解决了，仅仅是因为一些css行放错了位置-谢谢你的帮助。这非常接近-我希望在单击div后悬停保持在原位，但仍然能够在其他2个选项上悬停，滑块随之移动，直到单击另一个div…这有意义吗？我给了你一个加号以帮助，但我的问题解决了，只是因为一些css行放错了位置-谢谢你的帮助。有趣的是，让我试试，我会给你回复的。你说的和我已经吃过的不一样吗？唯一的区别是我用逗号分隔了我的，而你的在不同的行上？为什么是你的工作方式，而我原来的工作方式却不是？非常好奇？经过测试，效果很好-谢谢你的帮助。为什么我必须把它们放在css中的不同行上？我认为逗号表示两个id是相同的？它是相同的，但是css规则顺序也很重要，因为您拥有它的方式#profile_选择a:n类型（3）的规则将在所有情况下使用。与其他规则a:n类型（1）和a:n类型（2）一样有效影响同一个元素#profile_selection_slider，因此修复它的方法是将所有的.active规则放在第一位，这样即使另一个元素是.activeohh，也会使用：hover规则。activeohh，谈论大脑放屁…哈哈。谢谢你帮我澄清这件事！有意思，让我试试看，我会给你回复的。你说的和我已经吃过的不一样吗？唯一的区别是我用逗号分隔了我的，而你的在不同的行上？为什么是你的工作方式，而我原来的工作方式却不是？非常好奇？经过测试，效果很好-谢谢你的帮助。为什么我必须把它们放在css中的不同行上？我认为逗号表示两个id是相同的？它是相同的，但是css规则顺序也很重要，因为您拥有它的方式#profile_选择a:n类型（3）的规则将在所有情况下使用。与其他规则a:n类型（1）和a:n类型（2）一样有效影响同一个元素#profile_selection_slider，因此修复它的方法是将所有的.active规则放在第一位，这样即使另一个元素是.activeohh，也会使用：hover规则。activeohh，谈论大脑放屁…哈哈。谢谢你帮我澄清这件事！

#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider { left: 275px; }
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider { left: 480px; }

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