Question

根据您单击的图像更改段落的最简单方法是什么。以下是内容的JSFIDDLE减去段落的显示。根据您单击的图像，图像下方的段落将一次显示1个。

<div class="content">
    <div class="memberPhotoWrapper">
        <div class="memberPhotos">
            <a href="#"><img class="member1Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a>
            <a href="#"><img class="member2Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a>
            <a href="#"><img class="member3Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a>
            <a href="#"><img class="member4Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a>
        </div>
    </div>
    <div class="memberIntros">
        <div class="member1Intro">
             <h3>User Name</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
        </div>
        <div class="member2Intro">
             <h3>User Name</h3>
            <p>PSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.</p>
        </div>
        <div class="member3Intro">
            <h3>User Name</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
        </div>
        <div class="member4Intro">
            <h3>User Name</h3>
            <p>PSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.</p>
        </div>
    </div>
</div>

Answer 1

纯粹的JS：

var img = document.getElementsByTagName("img");
var intros = document.getElementsByClassName("intros");

for(var i = 0; i < img.length; i++) {
    (function(i) {
        img[i].onclick = function() {
            reset();
            intros[i].style.display = "block"; 
        }
    })(i);
}

function reset() {
    for(var i = 0; i < img.length; i++) {
        intros[i].style.display = "";
    }
}

FIDDLE

Answer 2

使用带有jquery库的hide / show函数

$(document).ready(function(){
    var m1= true;
    $( ".member1Photo" ).click(function() {
        if(m1) {
            $('#member1').hide();
            m1=false;
        }else{
            $('#member1').show();
            m1=true;
        }
        });

    });

http://jsfiddle.net/djedjex/M7DhU/4/

Answer 3

您可以使用这段简单的代码（使用jQuery）。

$('.memberPhotos img').click(function() {
    $('.memberIntros .current').hide('slow');
    $('#'+this.id+'_intro').show('slow');
    $('#'+this.id+'_intro').addClass('current');
});

示例http://jsfiddle.net/8kgwR/1/

您需要更改一些类/ ID名称以适应。

单击链接时显示和隐藏段落

3 个答案: