Jquery Div 隐藏点击

Posted 2023-02-21

【中文标题】Jquery Div 隐藏点击

【英文标题】：Jquery Div Hide on click

【发布时间】：2010-11-08 17:09:08

【问题描述】：

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

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

每个选项卡都会使窗格在单击时移动其中的内容。我希望在点击时发生ELSE。单击选项卡时，我希望图像出现在页面左上角的一个名为“#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 代码帮助我吗？非常感谢！

【参考方案1】：

使用show() 和hide()。

大意是：

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

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

或使用toggle():

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

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

【参考方案2】：

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

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

【参考方案3】：

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

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

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