無序列表jquery顯示固定位置列表中的選定項目

我有一個無序列表。我必須從列表中選擇一個項目並將其顯示在固定的空間中。無序列表jquery顯示固定位置列表中的選定項目

我的問題是，總是想象列表的最後一個元素，當我點擊其他鏈接時，最後一個總是在正面。

如何可視化我選擇的元素？我的列表很長，我無法對所有項目製作隱藏命令。

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

來源

2016-03-21 Nicolò Scapin

你需要能夠操縱其他元素你不想展示。除非你有一個在修改css時動態更新的全局z-index變量，@dr_debugs方法是一個不錯的選擇。您只需將類名複製並粘貼到每個列表元素中。 –

你忘了點擊您的div後隱藏的其他元素。

更改代碼是這樣的：

$("#show1").click(function(){ $('.view').hide(); // add this to your code to hide your elemets again. $("#one").show(); });
所以你的名單很長，YOUT不能爲所有的項目使隱藏的命令：類view添加到您的div。

我更新您的提琴： http://jsfiddle.net/ymkccefd/2/

來源

2016-03-21 15:20:47 osanger

簡單而美觀的代碼中看到！非常感謝你！ –

您可以使用index並添加您的圖片，一個包裝

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

來源

2016-03-21 15:26:16 BenG

無序列表jquery顯示固定位置列表中的選定項目

回答

相關問題