css jquery ausblenden eines div, andere anzeigen

Ich bin eine Herausforderung.
Ich habe 2 divs, einen Satz zu display:none; in der css, wenn die Seite geladen wird
Ich habe zwei entsprechende links. Wenn der Benutzer klickt auf link1 möchte ich zeigen div1 - und ausblenden div2. Und wenn der Benutzer klickt auf link2 möchte ich zeigen div2 - und ausblenden div1.

Ich nicht in der Lage, diese zu arbeiten! Jede Hilfe sehr geschätzt.
S

  • Html-code anzeigen.
  • Sie benötigen, um javascript-code zu erreichen, und ändern Sie die div-Klasse basierend auf welche Schaltfläche geklickt wurde
  • besser ist es google.
InformationsquelleAutor user1568790 | 2012-08-01
  1. 6

    Hier ein Beispiel:

    $(function () {
  $(".div1, .div2").hide();

  $(".link1, .link2").bind("click", function () {
    $(".div1, .div2").hide();        

    if ($(this).attr("class") == "link1")
    {
      $(".div1").show();
    }
    else
    {
      $(".div2").show();
    }
  });

});

    Und hier ist die Demo

    • Danke Euch allen sehr!!
    InformationsquelleAutor Besnik
  2. 4

    Erstens,geben Sie bitte den HTML-Code für Ihre Frage, wenn Sie bitte hier.

    Zweitens, Sie konnte etwas tun, wie..

    <script>
$(document).ready(function(){
    $("#div1").hide();
    $("#link1").on("click",function(){
        $("#div1").show();
        $("#div2").hide();
    });
    $("#link2").on("click",function(){
        $("#div2").show();
        $("#div1").hide();
    });
});
</script>
    InformationsquelleAutor Kaustubh
  3. 2

    Je nach Ihrer HTML-Struktur

    wenn so etwas

    ​<a href='#'>link1</a>
<a href='#'>link2</a>
<div> div for link 1</div>
<div> div for link 2</div>

    dann jQuery-code würde wie folgt Aussehen

    $('a').click(function(e){
    $('div').eq($(this).index()).show();
    $('div').not($('div').eq($(this).index()).hide();
});

    http://jsfiddle.net/NXdyb/

    InformationsquelleAutor ᾠῗᵲᄐᶌ
  4. 1

    Sind Sie deadset auf jquery? Diese kann getan werden einfach mit normalem alt, JavsScript.

    function switchVisible() {

if (document.getElementById['div1'].style.visibility == 'visible') {
    document.getElementById['div1'].style.visibility = 'hidden';
    document.getElementById['div2'].style.visibility = 'visible';
}
else {
    document.getElementById['div1'].style.visibility = 'visible';
    document.getElementById['div2'].style.visibility = 'hidden';
}

}

    Dann in Ihrem link1:

    <a href="/blah" onclick="javascript:switchVisible();">
    InformationsquelleAutor Jeremy1026
  5. 0

    Dies ist ein sehr einfaches Prinzip...können Sie erreichen es viele Möglichkeiten, dies ist nur ein Beispiel.

    Ignorieren Sie die Selektoren, ich bin faul.

    HTML ->

    <a href="#"> Show Div 1 </a> | <a href="#"> Show Div 2 </a>
<br/><br/>
<div id="div1"> Div 1 </div>
<div id="div2"> Div 2 </div>

    CSS -> 

    #div1{
  display:none;   
}

    Den jQuery ->

    $('a:eq(0)').click(function(){
  $('#div1').toggle();
  $('#div2').toggle();    
});
$('a:eq(1)').click(function(){
  $('#div2').toggle();
  $('#div1').toggle();   
});
    InformationsquelleAutor Ohgodwhy
  6. 0

    Haben Sie einen Blick auf dieses Beispiel, es könnte helfen, Sie aus: http://jsfiddle.net/MUtPy/2/ ^^ Es gibt viele Möglichkeiten, dies zu tun in Jquery, aber dieses Beispiel sollte sicherlich bekommen u gestartet =)

    InformationsquelleAutor azzy81
  7. 0

    Dass fiddle hat mir geholfen, es ist wirklich verständlich : http://jsfiddle.net/bipen/zBdFQ/1/

    $("#link1").click(function(e) {
  e.preventDefault();
  $("#div1").slideDown(slow);
  $("#div2").slideUp(slow);
});

$("#link2").click(function(e) {
  e.preventDefault();
  $("#div1").slideUp(slow);
  $("#div2").slideDown(slow);
});
    InformationsquelleAutor Igor Laszlo
Schreibe einen Kommentar