javascript - 选择状态到div

Question

是否可以将选定状态添加到 div。即向单击的 div 添加边框？一次只显示一个

在这里 fiddle :http://jsfiddle.net/sPLDh/4/

HTML:

<div class="people">

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>John doe</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Peter Pan</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Sally Hills</h2>
    </div>

    <p>John Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Peter Pan is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sally Hills is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>Betty Boo</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Sm Hunt</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Paula Walls</h2>
    </div>

    <p>Betty Jones Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sam Hunt is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Paula Walls is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

</div>

CSS:

.people{
width:500px;
}
.person{
width:33%;
margin:0 auto;
float:left;
}
.people p{
display:none;
}

JS:

$('.person img').click(function() {
    var index = $('.person img').index(this);
    $('.people p:visible').fadeOut('fast','linear').promise().done(function() {
        $('.people p:eq('+index+')').fadeIn('fast','linear');
    });
});

Answer 1

使用 .addClass() 和 .removeClass() 在所选图像上添加和删除边框。

试试这个:

CSS:

.active{
    border: 3px solid #000;
}

JQuery:

$('.person img').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    var index = $('.person img').index(this);
    $('.people p:visible').fadeOut('fast','linear').promise().done(function() {
        $('.people p:eq('+index+')').fadeIn('fast','linear');
    });
});

更新

添加边框后，您的文字变得困惑。所以试试这个...

在.people p中，添加:

添加:

float:left;

JSFiddle Demo