javascript - jQuery 在单击不同的 li 时显示 li

Question

我有两个列表 - 第一个有名称、大图和描述，第二个是小缩略图列表。单击缩略图时，我只需要显示具有较大图像和文本的相应 li。因此，如果单击 John Doe 的缩略图，我需要显示较大的 John Doe 图像和文本，并确保隐藏较大的 Bob Doe 和 Tom Doe 图片和文本。我还想在页面加载时显示第一个较大的图像和描述。到目前为止，这是我的 HTML 和 jQuery - 谢谢!

  <div id="bios">
      <ul>
        <li>
            <img src="../img/jd.jpg" alt="John Doe">
            <br>
            <span class = "name">John Doe</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
        </li>

        <li>
            <img src="../img/bd.png" alt="Bob Doe">
            <br>
            <span class = "name">Bob Doe</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
        </li>

        <li>
            <img src= "../img/td.png" alt="Tom Doe">
            <br>    
            <span class = "name">Tom Doe</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
        </li>

       </ul>    
</div>
    <div id = "thumb">
      <ul>  
        <li>

            <img src="../img/jdthumb.png" alt="John Doe">
            <br>
            John Doe        
        </li>


        <li>

            <img src="../img/bdthumb.png" alt="Bob Doe">
            <br>
            Bob Doe

        </li>

        <li>    

            <img src= "../img/tdthumb.png" alt="Tom Doe">
            <br>
            Tom Doe

        </li>   

    </ul>
</div>

jQuery:

  $("#bios li").first().css( "display", "block" );

  $("#thumb li").on('click', function() {
      $( "#bios li" ).css( "display", "block");
      $(this).siblings('li').slideToggle();

  });

Answer 1

$("#thumb li").click(function() {
    var pos = $(this).index();
    $("#bios li").hide();
    $("#bios li").eq(pos).show();
    $(this).siblings("li").slideToggle();
});