Question

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

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

Answer 2

附加在$（＆＃39; .person img＆＃39;）。点击功能

$(".person").css("border", "0px");
$(this).parent().css("border", "1px solid #000");

所以函数看起来像

$('.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');
    });
    $(".person").css("border", "0px");
    $(this).parent().css("border", "1px solid #000");
});

希望它有所帮助！

Answer 3

如果您不支持IE7及以下版本，则不需要Javascript。请参阅此fiddle

标记：

<div class="people">

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

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

</div>

CSS：

.person:focus{
    border: 2px solid cyan;
}

JS：

var images = [].slice.call(document.querySelectorAll('img'));
images.forEach(function(image){
    image.addEventListener('click', function(){
        this.focus();
    });
});

请注意使用的 tabindex 属性。

Answer 4

我创建了一个快速简短的演示，使用addClass和removeClass来切换css边框，点击“div”。 HTML：

<div class="target">Click here to show its border!</div>

CSS：

.target{
    border: 2px solid grey;
}

使用Javascript：

$(".target").click(function(){
    if($(this).prop("class") == "target"){
         $(this).removeClass("target");
    }
    else{
        $(this).addClass("target");
    }
});

以下是我的演示：http://jsfiddle.net/jasperlee/NCS2g/

选择状态为div

4 个答案: