2列 - 单击其中一个缩略图显示其他

Question

我试图创建一个页面，点击左列中的缩略图显示右列中的文本。然后会有许多缩略图，每个缩略图都有自己的文本，点击时右栏中的相同位置出现。 我想知道是否有任何CSS或jQuery项目在那里做这种事情？

感谢

Answer 1

我觉得这是你想要什么，我用它做了一个jsFiddle。

HTML：

<div id="wrapper"> 
<div id="left"> 
    <p><a href="javascript:void()" class="one">THUMBNAIL #1</a> 
    </p> 
    <p><a href="javascript:void()" class="two">THUMBNAIL #2</a> 
    </p> 
    <p><a href="javascript:void()" class="three">THUMBNAIL #3</a> 
    </p> 
</div> 
<div id="right"> 
    <!-- Each div here will contain the text to be show on the right --> 
    <div id="textOne" class="text" style="display:block;"> 
     <h1>one</h1> 

     <p>Zzril amet nisl consequat claritas litterarum. In aliquam dolore qui diam veniam. Ut exerci ullamcorper ut sit dolor.</p> 
    </div> 
    <div id="textTwo" class="text"> 
     <h1>two</h1> 

     <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p> 
    </div> 
     <div id="textThree" class="text"> 
      <h1>three</h1> 

      <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p> 
     </div> 
    </div> 
</div> 

CSS：

a { 
text-decoration:none; 

} 
#wrapper { 
    width:600px; 
} 
#left { 
    margin-top:100px; 
    overflow:hidden; 
    float:left; 
    width:20%; 
} 
#right { 
    overflow:hidden; 
    float:left; 
    width:80%; 
} 

的Javascript（jQuery的1.9.1）

$(".text").hide(); 

$("#left a.one").click(function() { 
    $(".text").hide(); 
    $("#textOne").fadeIn(); 
    return false; 
}); 

$("#left a.two").click(function() { 
    $(".text").hide(); 
    $("#textTwo").fadeIn(); 
    return false; 
}); 

$("#left a.three").click(function() { 
    $(".text").hide(); 
    $("#textThree").fadeIn(); 
    return false; 
});