Question

我有一个“讲话泡泡”。我使用div为内容构建它。在那个div中我放了一个我用于尾巴的img。页面加载时会隐藏这两个。单击某个按钮时，应显示这两个按钮。然而，仅显示内容（＃msg-loc）。 img仍然隐藏着。我不明白。奇怪的是，如果我默认删除隐藏的属性，一切都被正确显示。显示属性不适用于img吗？希望有人能提供帮助。提前感谢您的回复。干杯。马克。

我的HTML：

<div id="msg-loc" class="hidden">
    <img src="img/triangle.png" class="hidden triangle"/>
</div>

我的JS：

$('#msg-loc').html('the value is incorrect').removeClass('hidden');
$('.triangle').removeClass('hidden');

我的CSS：

#msg-loc{
    width:300px;
    text-align:center;
    margin-top:8px;
    background-color:pink;}

.triangle{
    left:65px;
    top:-13px;
    position:relative;}

.hidden{
    display:none;}

Answer 1

您正在使用“值不正确”替换图像。

根据评论...更新解决方案： http://jsfiddle.net/P7yhz/3/

HTML

   <div id="msg-loc" class="hidden">
    <div class="triangle"></div>
    <div class="message">The value is incorrect</div>
</div>
<a href="#">Reveal</a>

CSS

#msg-loc{
    width:300px;
    text-align:center;
    margin-top:8px;
}

.triangle {
    background:url('http://www.mathsisfun.com/geometry/images/regular-triangle-sm.gif') no-repeat bottom center;
    height: 40px;
}
.message {background:pink;}

.hidden{
    display:none;}

JS

$(document).ready(function() {
    $('a').click(function() {
        $('#msg-loc').toggleClass('hidden');
    });

}）;

Answer 2

通过使用$('#msg-loc').html('the value is incorrect').removeClass('hidden');，您可以完全删除#msg-loc div中的内容。在它为空之后，将其“隐藏”类删除。

这是由.html函数完成的。

解决方案将是。

var x = document.createTextNode("the value is incorrect");
$('#msg-loc').append(x);
$('#msg-loc').removeClass('hidden');
$('.triangle').removeClass('hidden');

Answer 3

这是代码的html部分

<div id="msg-loc" class="hidden">
    <img src="Icons/Apps_icons/eye.png" id="yo" class="hidden triangle"/>
</div> 
<a href="#" id="t">Click Me</a>

这是JavaScript部分

$(document).ready(function(){
    $("a#t").click(function(event){
            event.preventDefault();
            $("div#msg-loc").removeClass("hidden");
            $("img#yo").removeClass("hidden");
            }); 
        });

我刚刚在“img”标签和一个Anchor标签上添加了一个“id”，它提供了要调用的功能。我认为你的CSS是正确的。

CSS - 显示不使用img的属性

3 个答案: