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的方法,寻找最简单的方法