jquery 显示/隐藏多个 div 切换答案

【问题标题】：jquery show/hide multiple div togglejquery 显示/隐藏多个 div 切换
【发布时间】：2012-06-05 15:11:42
【问题描述】：

首先感谢您抽出宝贵时间帮助我。

对不起我的英语;-)

好吧，我给你一个链接到我的项目，它会更容易理解我的问题

http://lix.in/-c20b94

如您在右侧所见，您有社交面板。

我想用 jquery 为每个面板打开一个面板（带有最后的提要）。在这里阅读了一些帖子后，我能够让它工作（我不太擅长 jquery）。但是我还是有问题。

当您单击另一个按钮（facebook、youtube...）时，您会注意到面板会关闭/打开等。但按钮本身仍处于活动位置。它不会回到他的正常位置。我认为这是由于切换问题

代码：

$(".link1").click(function(){
    $("#twittercontent, #youtubehome").hide();
    $("#pz_fbplugin").toggle("fast");
    $(this).toggleClass("active");
    return false;
    $(".link2, .link3").removeClass('active');
    $(".link1").addClass("active");
});

$(".link2").click(function(){
    $("#pz_fbplugin, #youtubehome").hide();
    $("#twittercontent").toggle("fast");
    $(this).toggleClass("active");
        return false;
    $(".link1, .link3").removeClass("active");
    $(".link2").addClass("active");
});

$(".link3").click(function(){
    $("#pz_fbplugin, #twittercontent").hide();
    $("#youtubehome").toggle("fast");
    $(this).toggleClass("active");
    return false;
    $(".link1, .link2").removeClass("active");
    $(".link3").addClass("active");
});

CSS：

a.facebook {width: 46px;position: fixed; right:0;  height: 130px; top: 175px; margin-right: 0; background: url("socialrudyfacebook.png")no-repeat; z-index:51}
a.facebook:hover{width: 129px}
a.active.facebook{width: 129px}

a.twitter{width: 46px; position: fixed; height: 130px;right: 0; top: 317px; margin-right: 0;z-index: 51;background: url("socialrudytwitter.png")no-repeat; a-index:51}
a.twitter:hover{ width: 129px}
a.active.twitter{ width: 129px}

a.youtube{width: 46px;position: fixed; height: 130px; right: 0; top: 457px ;z-index: 150; background: url("socialrudyyoutube")no-repeat; a-index:51}
a.youtube:hover{ width: 129px}
a.active.youtube{ width: 129px}

希望你能帮我解决这个问题。

【问题讨论】：

在所有情况下，您在操作类之前都有return false;，因此这些更改不会被执行。

标签： jquery toggle show-hide

【解决方案1】：

我认为你的问题是return false。如果您将其删除或向下移动，它应该可以工作。除了 return 你也可以使用：

$(".link3").click(function(e){
    e.preventDefault();
    // your function and stuff
});

【讨论】：

非常感谢一个小错误，谁做出了改变;-)

【解决方案2】：

将return false 移动到函数的末尾。这是必须的帮助。

【讨论】：

【解决方案3】：

当您return false 时，其余代码不会被执行。远程它，它会工作，或者只是为了让事情变得简单，请执行以下操作。

为每个链接添加相同的类。就像“标签”一样。

然后在每个 .click 上，您只需调用即可。

$('.tab').removeClass("active");

当您单击一个选项卡时，您将确保其余部分恢复到原始状态。

if ($(this).hasClass('active'))
    $(this).removeClass('active');

将该行添加到每个 .click，它应该可以工作

【讨论】：

非常感谢您的回答 ;-)