ungeordnete Liste jquery gezeigt ausgewähltes Element von der Liste in fester Position

Question

Ich habe eine ungeordnete Liste. Ich muss ein Element aus der Liste auswählen und es in einem festen Abstand anzeigen.

mein Problem ist, dass immer das letzte Element der Liste visualisieren und wenn ich auf die anderen Links klicke, ist die letzte immer auf der Vorderseite.

Wie kann ich das ausgewählte Element visualisieren? meine Liste ist sehr lang und ich kann nicht ausblenden Befehl für alle Elemente.

http://jsfiddle.net/ymkccefd/

<script> 
$(document).ready(function(){ 
    $("#show1").click(function(){ 
    $("#one").show(); 
}); 
$("#show2").click(function(){ 
    $("#two").show(); 
}); 
    $("#show3").click(function(){ 
    $("#three").show(); 
}); 

}); 

<ul id="element"> 
     <li><div id="show1"> showElementOne </div> </li> 
     <li><div id="show2"> showElementTwo</div> </li> 
     <li><div id="show3"> showElementThree</div> </li> 
</ul> 

<div id="one"> <img src="http://www.grandain.com/wp-content/uploads/2014/04/cane_1.jpg" height="402" width="420"> </div> 
<div id="two"> <img src="http://www.guidaprodotti.com/immagini/cane.jpg" height="420" width="420"> </div> 
<div id="three"> <img src="http://www.spaziosociale.it/public/immagini/22102014152877-canebar.jpg" height="420" width="420"> </div> 

</body> 

Answer 1

Sie haben vergessen, die anderen Elemente nach dem Klicken auf Ihre divs zu verstecken.

Ändern Sie den Code wie folgt aus:

1. $("#show1").click(function(){ $('.view').hide(); // add this to your code to hide your elemets again. $("#one").show(); });

2. So Ihre Liste ist sehr lang und yout kann nicht verbergen Befehl für alle Artikel: die Klasse hinzufügen view auf Ihre divs.

i Ihre Geige aktualisiert: http://jsfiddle.net/ymkccefd/2/

Answer 2

Sie die index verwenden könnte und einen Wrapper um Ihre Bilder

$(document).ready(function() { 
 

 
    $("#element div").click(function() { 
 
     $('.images div').hide(); 
 
     var index = $(this).parent().index(); 
 
     $(".images div").eq(index).show(); 
 
    }); 
 

 
    });

.images div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="element"> 
 
    <li> 
 
    <div id="show1">showElementOne</div> 
 
    </li> 
 
    <li> 
 
    <div id="show2">showElementTwo</div> 
 
    </li> 
 
    <li> 
 
    <div id="show3">showElementThree</div> 
 
    </li> 
 
</ul> 
 

 
<div class="images"> 
 
    <div id="one"> 
 
    <img src="http://www.grandain.com/wp-content/uploads/2014/04/cane_1.jpg" height="402" width="420"> 
 
    </div> 
 
    <div id="two"> 
 
    <img src="http://www.guidaprodotti.com/immagini/cane.jpg" height="420" width="420"> 
 
    </div> 
 
    <div id="three"> 
 
    <img src="http://www.spaziosociale.it/public/immagini/22102014152877-canebar.jpg" height="420" width="420"> 
 
    </div> 
 
</div>