2012-03-01 14 views
0

私は「吹き出し」を持っています。私はコンテンツのためのdivを使用してそれを構築します。その部門では、私が尻尾のために使ったimgを入れました。これらの2つは、ページが読み込まれると非表示になります。特定のボタンをクリックすると、その2つが表示されます。それにもかかわらず、内容(#msg-loc)だけが表示されます。 imgは隠されたままです。そして私はそれを取得しません。奇妙なことは、デフォルトで隠しプロパティを削除すると、すべてが適切に表示されるということです。表示プロパティはimgでは機能しませんか?誰かが助けることを願っています。あなたの返信を先にありがとう。乾杯。マークCSS - 表示プロパティが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;} 

答えて

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'); 
    }); 

});

+0

あなたがロック!シンプルで効果的です:)ありがとうございました。 – Marc

+0

ボタンをクリックするたびにprepend()が増加する問題です。前置詞とは逆の機能はありますか? – Marc

+1

個人的には、画像をドロップして、「エラー」スパンまたはdivの背景画像として使用します。 – isotrope

0

使用することにより$('#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');​ 
0

これは私がちょうど「IMG」タグと提供してアンカータグに「ID」を追加。これは、JavaScriptの一部

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

ある

<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> 

あなたのコードのHTML部分であります呼び出される関数。そして私はあなたのCSSが正しいと思います。

+0

こんにちはPrateek。助けてくれてありがとう。私はIsotropeによって提案されたソリューションを選択します。 – Marc

+0

@マーク:いいえ、問題の友人私もそのソリューションを好むが、私はちょうど代替案を提案.......応答のおかげで。 – Prateek

関連する問題