css - 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;
});