6

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

4

3 に答える 3

14

あなたのhtmlファイルで:

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

CSS ファイルで:

div.hidden { display: none; }

含まれている JavaScript ファイル内、または<script>タグ内:

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

hiddenクラスはdivを隠しています。jQuery関数は、リンクのクリックをリストし、リンクがたどられevent.preventDefault()ないようにし(参照できないように#)、最後にdivの可視性を切り替えます。

click()toggle()については、jQuery API を参照してください。

于 2012-04-26T19:37:41.200 に答える
2

これは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.

于 2012-04-26T19:38:35.063 に答える
1

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

于 2012-04-26T19:33:30.310 に答える