内部HTMLを表示するhtmlクリックイベントを変更するC＃

Question

このウェブサイトのアイコンの1つがクリックされたときに内部htmlを表示する方法を教えてもらえますか？別名資産。

Example

Answer 1

注：内部HTMLは、HTMLタグ 元の内容です：

こんにちは

=>ハロー内部HTML

ですが、あなたの例をもとに、あなたは削除/ UI要素を追加する方法を探しています画面に/から。

あなたはC＃を使うことができますが、これはが間違っての選択です。サーバーの不必要な負荷と、クライアントのUX-UIが悪いためです。

最高の選択肢は、CSSとCSSベースのアニメーションを使用してファンシーにすることです。アニメーションを確認してください。 animationcss あなたのソリューションのキーは、例と同じエヘリを正確に探している場合、またはjs clickを使用して要素にcssクラスを追加する場合は、cssホバーを探しています。

$("#clickItem").click(() => { 
 
    $(".hiddenContent2").toggleClass("showThis"); 
 
});

.hiddenContent1 , .hiddenContent2{ 
 
    visibility: hidden; 
 
} 
 

 
.item{ 
 
    cursor:pointer; 
 
    border:1px solid red; 
 
    margin:5px; 
 
    padding:10px; 
 
    width:200px; 
 
} 
 

 
#hoverItem:hover .hiddenContent1 { 
 
    visibility: visible; 
 
} 
 

 
.showThis{ 
 
    visibility:visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://raw.github.com/daneden/animate.css/master/animate.css" rel="stylesheet" /> 
 

 
<div id="hoverItem" class="item"> 
 
    <h4>item hover</h4> 
 
    <div class="hiddenContent1"> 
 
    <p>hidden elements</p> 
 
    </div> 
 
</div> 
 
<div id="clickItem" class="item"> 
 
    <h4>item click</h4> 
 
    <div class="hiddenContent2"> 
 
    <p>hidden elements</p> 
 
    </div> 
 
</div>