jquery - 一个切换元素的Jquery多个按钮

Question

基本上是这样的情况：

我有一个 iframe，当点击不同的按钮时加载不同。但是所有这些按钮都在切换同一个 iframe，但只有最上面的一个在工作。

我还希望动画使 iframe 不切换，然后在它已经打开时重新切换，但是单击了一个新链接。

HTML：

<div id="wrapper">
    <div id="left">LINKSSSSS</div>
    <div id="menu"> 
        <span class="button" id="leftbutton">open left</span>
        <span class="button" id="rightbutton">open right1</span>
        <span class="button" id="rightbutton">open right2</span>
        <span class="button" id="rightbutton">open right3</span>
    </div>
    <div id="right">RECHTSSSS</div>
</div>

CSS：

    #menu {
    background:#eee;
    width:300px;
    height:400px;
    float:left;
}
#left {
    float:left;
    display:none;
}
#right {
    float:left;
    display:none;
}

JS：

$(document).ready(function () {
    $('#leftbutton').click(function () {
        $('#right').hide();
        $('#left').toggle();
    });
});
$(document).ready(function () {
    $('#rightbutton').click(function () {
        $('#left').hide();
        $('#right').toggle();
    });
});

！编辑！

所以用id代替类选择器的问题已经解决了。我还设法实现了重新切换动画。当我点击同一个链接两次时，我只需要恢复切换功能。

就像现在一样：http: //jsfiddle.net/thomascs/CfGYG/6/

score 4 · Accepted Answer

属性id=""是唯一的。class=""改为使用

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

重新切换：

演示：http: //jsfiddle.net/CfGYG/3/

score 0 · Accepted Answer

看起来您的按钮没有触发，因为您使用的是 ID 而不是类。每个页面的 ID 都是唯一的。这就是为什么只有第一个 OPEN RIGHT 按钮被触发，而不是其他两个。对于像导航菜单项这样将被反复重用的东西，您应该使用类名。

我已经修改了您的代码以使用“rightbutton”和“leftbutton”作为类而不是IDS，现在它似乎可以按需要工作。

改变 open right1

至 open right1

和

open left

至

open right1

请参阅下面的工作演示：

http://jsfiddle.net/bNVkG/

这具有淡化效果。我已经用fadeIn() 和fadeOut() 替换了toggle()：

http://jsfiddle.net/HcRSm/

jquery - 一个切换元素的Jquery多个按钮

2 回答 2

Related

Reference