javascript - jquery无序列表显示从固定位置列表中选择的元素

Question

我有一个无序列表。我必须从列表中选择一个元素并将其显示在固定空间中。

我的问题是始终可视化列表的最后一个元素，当我单击其他链接时，最后一个元素始终位于前面。

如何可视化我选择的元素？我的列表很长，我无法对所有元素执行隐藏命令。

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

您在单击 div 后忘记隐藏其他元素。

像这样更改代码:

1. $("#show1").click(function(){
$('.view').hide();//将其添加到您的代码中以再次隐藏您的元素。
$("#one").show();
});

2. 所以你的列表很长，你无法为所有元素创建隐藏命令:将 view 类添加到您的 div 中。

我更新了你的 fiddle : http://jsfiddle.net/ymkccefd/2/