Fatal编程技术网

Javascript 单击时显示信息框

javascript jquery css

Javascript 单击时显示信息框,javascript,jquery,css,xhtml,Javascript,Jquery,Css,Xhtml,我已经搜索了3个小时，找不到解决方案。所有的即时消息都是当你点击表单中的输入字段时，旁边的信息框会自动显示出来。我试着去摆弄jQuery，但就是不能让它工作，即使我确信代码是正确的（我们不是一直都很开心吗） 无论如何，我很感激任何解决办法 我对jquery/css/html的尝试如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

我已经搜索了3个小时，找不到解决方案。所有的即时消息都是当你点击表单中的输入字段时，旁边的信息框会自动显示出来。我试着去摆弄jQuery，但就是不能让它工作，即使我确信代码是正确的（我们不是一直都很开心吗）

无论如何，我很感激任何解决办法

我对jquery/css/html的尝试如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
    .infoBubble {
        visibility:hidden;
        color:#000;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
    $('.box').click(function () { 
        $('.infoBubble').css({'visibility':'visible'});
    });
</script>
</head>
<body>

    <form action="process.php" method="get">

            <div class="row">
                <span class="label">Description: </span> 
                <input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
            </div>

        </form>

</body>
</html>


.信息泡沫{
可见性：隐藏；
颜色：#000；
}
$（'.box'）。单击（函数（）{
$（'.infoBubble'）.css（{'visibility'：'visible'}）；
});
说明：
与此输入相关的特定信息
尝试以下操作：

$('.box').click(function (){
    $('.infoBubble').toggle();
});
顺便说一下。隐藏/显示内容的css属性不是
可见性
，而是
显示
。例如：

display: none;
或

首先，您的JavaScript是在文档加载完成之前执行的，这意味着输入字段不存在。将您的代码附加到jQuery的事件以防止这种情况发生

$(function() {
    $('.box').click(function () { 
        $('.infoBubble').css({'visibility':'visible'});
    });
}
其次，使用
visiblity:hidden
隐藏的元素仍然会占用布局中的空间。通常您会使用
display:none
使元素看起来好像根本不存在。无论哪种方式，都可以使用该方法使元素可见

CSS:

JavaScript:

$('.infoBubble').show();
第三，您的用户可以在不点击输入的情况下聚焦输入（例如，按tab键）！通过使用事件而不是
单击
，您可以显示消息

$('.box').focus(function() { 
    $('.infoBubble').show()
});
除上述内容外，当用户不再关注输入时（当用户单击其他位置或从中退出时），还可以使用事件隐藏消息。最终你会得到这样的结果：

$(function() {
    $('.box').focus(function() {
        $('.infoBubble').show();
    }).blur(function() {
        $('.infoBubble').hide();
    });
}
可见性是有效的<代码>可见性：隐藏隐藏元素，但不会将其从文档流中删除<代码>显示：无隐藏元素并将其从页面流中删除。当属性保留在具有相同间距和位置但不可见的页面上时，使用Visibility。Display会完全删除它。这是ready事件的代码吗？根据你的回答，我发现这一点，它的工作，所以感谢你的答复$（document）.ready（function（）{@user29660:
$）（function（）{
是
$（document）.ready（function（）{
）的简写版本。两者都有效。 
$('.box').focus(function() { 
    $('.infoBubble').show()
});

$(function() {
    $('.box').focus(function() {
        $('.infoBubble').show();
    }).blur(function() {
        $('.infoBubble').hide();
    });
}