jquery - Jquery Div 隐藏点击

Question

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

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

每个选项卡都会使窗格在单击时移动其中的内容。我希望点击时发生其他事情。单击选项卡时，我希望图像出现在页面左上角的一个名为“#topleft”的 div 中。为了简单起见，让我们只关注这个 div，但我也会在点击时激活其他 div。

我正在考虑在 CSS 中将 #topleft div 设置为 display:none，并添加一个简单的 jquery 函数，当单击某个 div 时将 #topleft 可见性设置为 true。因此，让我们以此为例：我有一个 div #nav，里面有 5 个 div（每个 div 都包含自己的导航链接）。单击 div #nav taba 时，我希望 div #topleft 出现，而​​当单击另一个导航链接（例如 #nav tabb）时，我希望它消失。任何人都可以用这个相当简单的 jquery 代码帮助我吗？非常感谢！

Answer 1

使用show()和hide()。

大意是：

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

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

或使用toggle()：

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

如果您希望在页面加载时最初隐藏某些内容，请使用显示css 属性而不是可见性，因为 jQuery 显示、隐藏和切换方法通过操作显示 css 属性来工作。

Answer 2

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

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

要删除隐藏它的类并添加显示它的类？

Answer 3

要添加到 karim79 的建议，您可以使多个选项卡链接隐藏 #topleft div，如下所示：

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