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

Question

嗨，我是 jquery 的新手，在 javascript 中无处可去，但无论如何我试图创建这个轮播，您可以在其中单击列表中的任何项目并在左侧 div 上显示有关该项目的更多信息。

这是预览：

I've already created the carousel on the right part but im stuck on what to use for displaying the left part when specific item is selected can i do it with any jquery plugin or do i need to deep dive in javascript?

Answer 1

假设您有：

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

LIVE DEMO

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

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

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

});

Answer 2

您可以使用以下示例

HMTL

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

jQuery

//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');


        });

Answer 3

将单击事件绑定到轮播列表项，单击时，向您的服务器发出 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);
    //}
});

jsfiddler