Javascript 如何选择一个div并显示另一个具有该div更多描述的div？

您好，我是jquery上的新手，在javascript中没有任何地方，但无论如何，我正在尝试创建这个旋转木马，您可以在其中单击列表中的任何项目，并在左侧div中显示有关该项目的更多信息

以下是预览：

---

我已经在右侧部分创建了旋转木马，但我仍然无法确定在选择特定项目时，如何显示左侧部分。我可以使用任何jquery插件进行操作，还是需要深入使用javascript？

将单击事件绑定到旋转木马列表项，单击，向服务器发出ajax调用，检索html或json并将其显示在左侧div中

像这样的东西可能有用

$("#carousel > li").click(function() {
    alert($(this).attr("value"));
    //$.post("url.html", { fruit: $(this).attr("value") }, function(data) {
    //    $("#left").html("<span>" + $(this).attr("value") + "</span>" + data);
    //}
});

假设你有：

<div id="carousel">

    <div id="details">      
      <div>Details 1</div>
      <div>Details 2</div>
      <div>Details 3</div>      
    </div>

    <div id="info">
      <div>info 1</div>
      <div>info 2</div>
      <div>info 3</div>
    </div>

</div>

---

您可以使用以下示例

HMTL

var $det = $('#details > div');
$det.eq(0).show();

$('#info > div').click(function(){

  var idx = $(this).index();
  $det.hide().eq( idx ).fadeTo(500, 1);

});

<div id="slidercontent">      
  <div>Details 1</div>
  <div>Details 2</div>
  <div>Details 3</div>      
</div>

<div id="pager">
  <div>pager 1</div>
  <div>pager 2</div>
  <div>pager 3</div>
</div>

//Hidding the slidercontent
    $('#slidercontent div').hide();

    //Displaying first slidercontent
    $('#slidercontent div').eq(0).show();


    $('#pager div').click(function(){
        var idx = $(this).index();
        $('#slidercontent div').hide().eq( idx ).fadeTo(500, 1);
        $('#pager div').removeClass('active');
        $(this).addClass('active');


        });