JSトグルを使用して表示/非表示を切り替える

Question

JSの新機能です。 （JSFiddle https://jsfiddle.net/ey02227z/3/を参照）

画像が3つあり、画像をクリックして非表示のdivを表示したい場合は、次の画像をクリックすると最初の次のものを表示してください。

（画像2をクリックして、HiddenContent1を見るには画像1をクリックして、それはなど、HiddenContent1を隠し、HiddenContent2を示して）

ここでは私のコードです：

（I理由は、正直私を任意のJSが含まれていませんでしたどこから始めるのかわかりません）

ありがとうございます！

#ImgContainer{ 
 
    text-align:center; 
 
} 
 

 
.Hidden{ 
 
    display:none; 
 
} 
 

 
.image:hover{ 
 
    border: 1px solid purple; 
 
} 
 

 
#HiddenContentContainer{ 
 
    text-align: center; 
 
    min-height:50px; 
 
    min-width:100%; 
 
    border: 1px solid teal; 
 
}

<div id="MainContainer"> 
 
    <div id="ImgContainer"> 
 
     <a href="#"><img id="image1" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" /></a> 
 
     <a href="#"><img id="image2" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" /></a> 
 
     <a href="#"><img id="image3" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" /></a> 
 
    </div> 
 
    <div id="HiddenContentContainer"> 
 
    <h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3> 
 
     <div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div> 
 
     <div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div> 
 
     <div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div> 
 
    </div> 
 
</div>

Answer 1

これにより、問題が解決する場合があります。

HTML

<div id="MainContainer"> 
<div id="ImgContainer"> 
    <a href="#"><img id="image1" class="image" data-target="#Hidden1" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" /></a> 
    <a href="#"><img id="image2" class="image" data-target="#Hidden2" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" /></a> 
    <a href="#"><img id="image3" class="image" data-target="#Hidden3" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" /></a> 
</div> 
<div id="HiddenContentContainer"> 
    <h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3> 
    <div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div> 
    <div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div> 
    <div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div> 
</div> 

JSそれを試してみてください：

//Normal hide-show 
$(".image").click(function(){ 
$(".Hidden").hide(); 
    $($(this).attr("data-target")).show(); 
}); 

//For Toggle same code 
$(".image").click(function(){ 
$(".Hidden").hide(); 
    if(!$($(this).attr("data-target")).hasClass("current")){ 
    $($(this).attr("data-target")).show().addClass("current"); 
    } 
    else{ 
    $($(this).attr("data-target")).removeClass("current"); 
    } 

}); 

Answer 2

ここでの出発点です：

// listen to clicks from any of the links 
$('#ImgContainer a').on('click', function(e) { 
    e.preventDefault(); // not necessary in this case but good practice 

    var link = $(this); // the link that was clicked 
    var index = link.index(); // its index position 

    $('#HiddenContentContainer div').addClass('Hidden'); // reset all to hidden 
    $('#Hidden' + (index + 1)).removeClass('Hidden'); // remove the hidden associated with this clicked link 
}); 

は、あなたがより良い各行が何をするか理解するために、コメントが含まれています。