jquery Umschalten zwischen den beiden divs

Ich bin neu in jQuery und versucht, herauszufinden, wie man den folgenden...

Ich habe zwei div unten angezeigt, ich möchte group div-Karte geladen, aber nicht single dann div onclick von group oder single muss ich Umschalten zwischen den beiden. Wie kann das getan werden. Dies ist, was ich habe, so weit.

Send to: <a href="">Group</a> | <a href=""> Single<</a>

<div id="group">I'm a group</div>
<div id="single">I'm a single object</div>

UPDATE:

So etwas wie dies scheint zu funktionieren für mich....

 $("#link").click(function(e) {
      e.preventDefault();
      $("#divA, #divB").toggle();
      $(this).text(function(i, text) { return (text == "Show viewA") ? "Show viewB" : "Show viewA" });
    });

aber divB nicht zeigen.

  • Blick auf jQuery .klicken Sie auf() (api.jquery.com/click) und jQuery .toggle () - (api.jquery.com/toggle) - Methoden. Dann vielleicht posten, was du probiert haben.
  • cool, toggle() aussieht wie das, was ich brauche.
  • Yep, zu wechseln, müssen Sie die toggle(). Macht Sinn, nicht wahr?
  • aktualisierte Frage
InformationsquelleAutor GrantU | 2013-05-23
  1. 2

    Blick auf dein Beispiel habe ich erstellen ein einfaches Skript, dass die Arbeit schön für Ihre Bedürfnisse.

    <script>
  $(document).ready(function() {

    var $divA = $('#a'),
    $divB = $('#b'),
    $link = $('#link');
    $diplaytext = $('#display_text');

  //Initialize everything
  $link.text( 'Show Single' );
  $diplaytext.text( 'Group' );
  $divA.hide();

  $link.click(function(){

  //If A is visible when the link is clicked
  //you need to hide A and show B
  if( $divA.is( ':visible' ) ){
    $link.text( 'Show Single' );
    $diplaytext.text( 'Group' );
    $divA.hide();
    $divB.show();
  } else {
    $link.text( 'Show Group' );
    $diplaytext.text( 'Single Here' );
    $divA.show();
    $divB.hide();
  }

  return false;
  });


  });
</script>

    dann...

    display text: <span id="display_text"></span> | change: <a href="#" id="link" ></a>
<div id="a">a</div>
<div id="b">b</div>
    InformationsquelleAutor Glyn Jackson
  2. 2

    Nur ausblenden, dann blenden Sie die eine, die war nur geklickt.

    Send to: <a href="#" data-target="group" class="target">Group</a> | <a href="#" data-target="group" class="target">Single</a>

<div id="group" class="toggle">I'm a group</div>
<div id="single" class="toggle">I'm a single object</div>

    Dann verwenden Sie diese jQuery:

    $('.target').on('click', function(e) {
    e.preventDefault();
    $('.toggle').hide();
    $( '#' + $(this).data('target') ).show();
});
    InformationsquelleAutor BenjaminRH
  3. 2

    Den code ändern, um die folgenden

    Send to: <a data-div="group" href="#">Group</a> | <a data-div="single" href="#"> Single</a>

<div id="group">I'm a group</div>
<div id="single">I'm a single object</div>

<script>
    $(document).ready(function(){
        $("#single").css("display", "none");
        $("a").click(function(e){
            e.preventDefault(); //This prevents the link behaviour
            $("div").css("display", "none");
            $("#"+ $(this).attr("data-div")).css("display", "block");
        });

    });
</script>
    • dies scheint nicht für mich arbeiten
    • Sorry, hatte ein Tippfehler, jetzt prüfen. Es ' s wurde behoben
    InformationsquelleAutor Suthan Bala
  4. 1

    Dies ist der beste Weg zum wechseln zwischen zwei div Elemente:

    $("#show_Blue").click(function(){
 $("#Blue").toggle();
 $("#Red").hide();
});

$("#show_Red").click(function(){
 $("#Red").toggle();
 $("#Blue").hide();
});

    Es gibt eine demo - HIER

    InformationsquelleAutor François PETIT
Schreibe einen Kommentar