it-swarm.com.de

Div umschalten/umschalten (Jquery)

Ich möchte eine ziemlich einfache Aufgabe erfüllen (hoffe ich!)

Ich habe zwei div-Tags und 1 Anker-Tags wie folgt erhalten:

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

Was ich erreichen möchte, ist, den Anker-Tag zu verwenden, um zwischen den beiden Div-Tags umzuschalten, den einen auszublenden und den anderen anzuzeigen und umgekehrt. 

Wie kann man das am besten machen?

Freundliche Grüße.

17
Jan

Da ein Div zunächst ausgeblendet ist, können Sie einfach Toggle für beide Divs aufrufen:

<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

Ich denke du willst das:

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

oder

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

Dies wird durch JQuery ermöglicht

Hoffe das hilft...

4
norbertB

Wie wäre es damit

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

Für Ihren HTML-Code, der wie folgt aussieht:

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

Hey, in Ordnung! Eine Linie! Ich <3 jQuery.

1

Sie könnten dazu ein einfaches jQuery-Plugin schreiben. Das Plugin würde folgendermaßen aussehen:

(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));

Verbinden Sie dann das Plugin mit dem Klickereignis für das Ankertag:

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

Wenn Sie festlegen, dass die anfänglichen Anzeigeattribute für jedes div auf 'block' bzw. 'none' gesetzt werden sollen, sollten sie beim Klicken auf den Link angezeigt bzw. ausgeblendet werden.

0
pmarflee

Ich habe diesen Weg verwendet, um das für mehrere Blöcke zu tun, ohne neues Javascript zu beschwören:

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

Dann eine js-Portion für alle diese Fälle:

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

Beschrieben hier

0
Alex K

Ich denke das funktioniert

$(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
0
yogi46
function toggling_fields_contact_bank(class_name) {
            jQuery("." + class_name).animate({
                height: 'toggle'
            });
        }
0
Himani Bhardwaj

So schalte ich zwei Divs gleichzeitig um: 

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

es klappt !

0
mokrane