web-dev-qa-db-ja.com

divの切り替え/切り替え（jquery）

かなり簡単なタスクを達成したい（願っています！）

次のように、2つのdivタグと1つのアンカータグを取得しました。

<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

私が達成したいのは、アンカータグを使用して2つのdivタグを切り替え、一方を非表示にし、他方を表示することです。

これをどのように最良の方法で行うことができますか？

宜しくお願いします。

jqueryhtmlswitch-statementtoggle
17
Jan

最初は1つのdivが非表示になっているため、両方のdivに対して単に toggle を呼び出すことができます。

<a href="javascript:void(0);" id="forgot-password">forgot password?</a>
<div id="login-form">login form</div>

<div id="recover-password" style="display:none;">recover password</div>

<script type="text/javascript">
$(function(){
  $('#forgot-password').click(function(){
     $('#login-form').toggle();
     $('#recover-password').toggle(); 
  });
});
</script>
40
CMS

これが欲しいと思う：

$('#recover-password').show();

または

$('#recover-password').toggle();

これはJQueryによって可能になりました

お役に立てれば...

4
norbertB

これはどう

<script type="text/javascript" language="javascript">
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>

次のようなHTMLの場合：

<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

おい、大丈夫！一行！ I <3 jQuery。

1
Brandon Montgomery

これを行う簡単なjQueryプラグインを作成できます。プラグインは次のようになります。

(function($) {
$.fn.expandcollapse = function() {
    return this.each(function() {
        obj = $(this);
        switch (obj.css("display")) {
            case "block":
                displayValue = "none";
                break;

            case "none":                    
            default:
                displayValue = "block";
        }

        obj.css("display", displayValue);
    });
};

}（jQuery））;

次に、アンカータグのクリックイベントにプラグインを接続します。

$(document).ready(function() {
    $("#mylink").click(function() {
        $("div").expandcollapse();
    });
});

各divの初期「表示」属性をそれぞれ「ブロック」と「なし」に設定すると、リンクがクリックされたときに表示/非表示に切り替わります。

0
pmarflee

この方法を使用して、新しいjavascriptを作成せずに複数のブロックに対してこれを実行しました。

<a href="#" data-toggle="thatblock">Show/Hide Content</a>

<div id="thatblock" style="display: none">
  Here is some description that will appear when we click on the button
</div>

次に、そのようなすべての場合のjs部分：

$(function() {
  $('*[data-toggle]').click(function() {
    $('#'+$(this).attr('data-toggle')).toggle();
    return false;
  });
});

説明 ここ

0
Alex K

これはうまくいくと思う

$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

});
0
wdspot

これを試してください http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

0
yogi46
function toggling_fields_contact_bank(class_name) {
            jQuery("." + class_name).animate({
                height: 'toggle'
            });
        }
0
Himani Bhardwaj

これは私が2つのdivを同時に切り替える方法です：

$('#login-form, #recover-password').toggle();

できます ！

0
mokrane