Css 2列-单击其中一列中的缩略图图像将显示另一列中的文本

我正在尝试创建一个页面，在该页面中，单击左栏中的缩略图可以显示右栏中的文本。然后会有许多缩略图，每个缩略图都有自己的文本，单击时显示在右栏的同一位置。 我想知道是否有CSS或jquery项目可以做这种事情

---

谢谢

我想这就是你想要的，我用它做了一个

HTML:

Javascript（jQuery 1.9.1）

---

我可能有点傻，但我该怎么称呼javascript呢？我在页面的头部调用了GooglejQuery1.9.1，然后是上面的javascript。当我在浏览器中打开页面时，应该隐藏的文本不会被隐藏。如有任何帮助/进一步澄清，将不胜感激！有几种方法可以做到这一点，但试一下，用我提供的代码或修改后的代码创建一个.js文件，然后使用html其中script是.js文件的名称。；）编辑：当然，不要在html文件中编写javascript，也不要删除jQuery1.9.1引用。

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

a {
text-decoration:none;

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

$(".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;
});