Javascript 不工作 - 2 个不同的 div 容器

Question

我正在努力尝试在单独的 div 容器中创建链接在完全不同的 div 容器中打开面板（如果您单击第二个 div 容器链接，面板也会打开并且链接本身处于活动状态) - 如果我单击第一个 div 容器中的链接，面板会从第二个 div 容器打开，但我正在努力使第一个 div 容器链接激活第二个 div 容器中的活动状态。 ..

如果您查看演示，只需单击 {Ñا} 成员选项卡，因为其他 2 个处于非活动状态...一旦您单击该选项卡，就会打开一个面板（不是我说的那个）大约虽然），现在；该面板已打开，请查看最底部，在 div 容器的左侧，其中包含信息标题：“Official Roster”，如果您单击该特定链接，则那里有一个显示“rank”的链接，的面板像它应该打开的那样打开，但是，活动状态选择了它们，而不仅仅是选择的 1...我快接近了，但我被严重卡住了，似乎无法弄清楚...

演示：http://jsfiddle.net/Djdzw/2/

我相信需要纯 javascript，但是，它也可能是 css。但是，我将在下面提供我的 atm 代码 - 我只会提供 javascript，因为发布所需的所有代码实在是太多了......所以，如果你可以简单地看看上面的演示，它可能对眼睛更容易;)

JAVASCRIPT：

/* ===== 下面是需要编辑的部分 ===== */

$('.info_box p a').click(function () {
    var a = $('#profile_list a');
    $('#profile_list a').removeClass('active');
    $('#profile_list a').addClass('active');
});

Answer 1

你是这个意思吗？

$('.info_box p a').click(function () {
    var id = this.id; //get the id of the clicked item
    var a = $('#profile_list a[href="#' + id +'"]'); //construct the selector to select the menu item which has the same href
    $('#profile_list a').not(a.addClass('active')).removeClass('active'); //now do the add/remove class

});

Fiddle

Answer 2

我这样做了，它奏效了。我希望这是您正在寻找的：

$('.info_box p a').click(function () {
    var a = $('#profile_list a');
    $('#profile_list a').removeClass('active');
    $('#profile_list a.panel[href=' + $(this).attr('href') + ']').addClass('active');
});

jsFiddle