Jquery Div隐藏在点击 [英] Jquery Div Hide on click

查看:80
本文介绍了Jquery Div隐藏在点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在页面中使用尾声滑块.在此处查看:

I using coda slider in my page. View it here:

http://www.ndoherty.com/demos/coda-滑块/1.1.1/

每个选项卡都会导致窗格在单击时在其中移动内容.我希望点击时发生 ELSE .单击选项卡后,我希望图像显示在页面的左上部分的"#topleft" div中.为了简单起见,让我们只关注一个div,但是我也会在单击时激活其他div.

Each tab causes the pane to shift the content inside it when it is clicked. I want something ELSE to happen on click. When a tab is clicked, I want an image to appear in the topleft section of the page in a div called "#topleft". For the sake of simplicity, lets just focus on this one div, but I will have other divs activated on click as well.

我正在考虑在CSS中将#topleft div设置为display:none,并添加一个简单的jquery函数,当单击某个div时,该函数会将#topleft可见性设置为true.让我们以这个为例:我有一个div #nav,里面有5个div(每个都包含自己的nav链接).单击div #nav taba时,我要显示div #topleft,单击另一个navlink(例如#nav tabb)时,我希望它消失.有人可以用这个相当简单的jquery代码帮助我吗?非常感谢!

I was thinking of setting the #topleft div to display:none in the CSS, and adding a simple jquery function that sets the #topleft visibility to true when a certain div is clicked. So lets use this for an example: I have a div #nav with 5 divs inside it (each containing their own nav link). When div #nav taba is clicked, I want div #topleft to appear, and when another navlink (say #nav tabb) is clicked I want it to disappear. Can anybody help me out with this fairly simple jquery code? THANKS SOOO MUCH!

推荐答案

使用 show() hide().

以下方面的作用

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

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

或使用 toggle():

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

如果要在页面加载时最初隐藏某些内容,请使用 display css属性(而不是可见性),如jQuery所示,隐藏和切换方法通过操纵display css属性来工作.

Use the display css property as opposed to visibility, if you want something to be initially hidden when your page loads, as the jQuery show, hide and toggle methods work by manipulating the display css property.

这篇关于Jquery Div隐藏在点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆