Jquery Div 隐藏点击

Posted

技术标签:

【中文标题】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")

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

【讨论】:

以上是关于Jquery Div 隐藏点击的主要内容,如果未能解决你的问题,请参考以下文章

求用jquery点击空白处隐藏div的方法,寻找最简单的方法

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

[转]JQuery控制div外点击隐藏,div内点击不会隐藏

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

jQuery点击div其他地方隐藏div