html divを非表示にする

Question

私はRuby-On-Railsで小さなアプリケーションを開発しています。私は、リンクがクリックされるまで、html.erbファイル内のdivを隠したいと思っています。これを行う最も簡単な方法は何ですか？

Answer 1

divを隠している。 jQuery関数は、リンクのクリックをリスニングして、リンクが続くのを防ぎます（event.preventDefault()はブラウズして#になります）。最後にdivの表示を切り替えます。

click()とtoggle()のjQuery APIを参照してください。

Answer 2

スタイルdisplay:noneまたはopacity:0を適用できます。あなたのページにdivを置かないようにdivが表示され、divが表示されないようにしますが、それでも彼の場所は保持されます。最初の人はそれを隠し、2番目の人はやっとそれを隠すと言うこともできます。他にも解決策があるかもしれませんが、それは私が知っている2つの解決策です。

$(function() { 
    $('a#show_whatever').click(function(event){ 
    event.preventDefault(); 
    $('div#whatever').toggle(); 
    }); 
}); 

hiddenクラス：付属のJavaScriptファイル、または<script>タグの内部には

div.hidden { display: none; } 

：あなたのCSSファイルで

<a href="#" id="show_whatever">Show Whatever</a> 
<div id="whatever" class="hidden">...</div> 

：あなたのHTMLファイルに

Answer 3

これはjavascriptで簡単です。たとえば、jQueryのjavascriptライブラリを使用すると、ここに示すように、divをリンクに基づいて表示するかどうかを簡単に切り替えることができます。 http://jsfiddle.net/Yvdnx/

HTML：

<a href="#">Click Me To Display Div</a> 
<div>Foo</div>​ 

Javascriptを：

$(function() { 
    $("div").hide(); 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $("div").toggle(); 
    }); 
});​ 

jQueryの信頼性が高く、多くのブラウザで機能し、そのよう:targetなどCSS3のセレクタを使用してからそれを区別します。