点击隐藏Jquery Div

Question

我在我的页面中使用coda滑块。在这里查看：

http://www.ndoherty.com/demos/coda-slider/1.1.1/

每个选项卡在单击时会导致窗格内的内容移动。我希望单击时发生其他事情。当单击选项卡时，我希望一张图像出现在页面左上角的名为“＃topleft”的div中。为了简单起见，让我们只专注于这一个div，但我还将激活其他div。

我想在CSS中设置#topleft div以不显示，并添加一个简单的jquery函数，该函数在单击某个div时将#topleft可见性设置为true。因此，让我们以此为例：我有一个带有5个div的#nav div（每个div都包含自己的导航链接）。当单击div #nav taba时，我希望div #topleft出现，当单击另一个导航链接（例如#nav tabb）时，我希望它消失。有人能帮我完成这个相当简单的jquery代码吗？非常感谢！

- Jesse

Answer 1

使用show()和hide()方法。

类似于以下效果：

$('#someTabLink').click(function() {
    $('#someImage').show();
});

$('#someOtherTabLink').click(function() {
    $('#someImage').hide();
});

或者使用toggle()函数：

$('#someTabLink').click(function() {
    $('#someImage').toggle();
});

如果你希望在页面加载时将某些内容初始隐藏，那么请使用CSS的display属性而不是visibility属性，因为jQuery的show、hide和toggle方法是通过操作display属性来工作的。

- karim79

Answer 2

除了karim79的建议，你还可以通过以下方式使多个选项卡链接隐藏#topleft div：

$('#tabb, #tabc, #tabd').click( function() {
    $('#topleft').hide();
});

-

Answer 3

你能在jQuery中使用类似这样的东西吗：

  $("element").addClass("ClassName")
  $("element").removeClass("ClassName")

如何移除隐藏元素的类并添加显示元素的类呢？

- Ryan