无序列表 jQuery 在固定位置显示列表中的选定项

unordered list jquery shown selected item from list in fixed position

本文关键字：列表 显示 位置 jQuery 定位 无序      更新时间：2023-09-26

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

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

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

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>

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

像这样更改代码：

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

  2. 所以你的列表很长，你不能对所有项目都发出隐藏命令：将类view添加到您的div。

我更新了你的小提琴：http://jsfiddle.net/ymkccefd/2/

您可以使用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>

相关文章：