Htmlで「メイン画像」を1つ作成しました。今、私は同じページで「メイン画像」をクリックすると、「メイン画像」のすぐ下に複数の画像を表示したかったのです。これは、私の下のコードは、1つの "メイン画像"をHTMLで作成します。同じページ内の「メイン画像」の直下に複数の画像を表示するには
<html>
<body>
<p>The image is a link.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>
同じページ内の「メイン画像」の直下に複数の画像を表示するにはどうすればよいですか？
$(document).ready(function() {
$('.thumbs').hide();
\t $('.main-image').on('click', function(){
\t \t $('.thumbs').show(); \t
\t });
});.outer {
\t width:600px;
\t float:left;
}
.main-image ,
.main-image img {
\t width:100%;
\t float:left;
\t overflow:hidden;
}
.thumbs {
\t width:100%;
\t float:left;
\t margin-top:15px;
}
.thumbs img {
\t display:inline-block;
\t width:100px;
\t margin-right:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
<div class="main-image">
\t <img src="about.jpg" alt="about" />
</div>
<div class="thumbs">
\t <img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
</div>
</div>これは、あなたが次のコードであなたの目標を達成することができ、私
同じ機能を持つ画像をもう1つ追加したいのですが、唯一の違いは最初にクリックするとメイン画像と関連する画像が表示され、第2のメイン画像は表示され、第2のメイン画像はdisable.inでなければなりません。どのように行うことができますか？ 。 – Rahul
$（ '主画像 '）をクリック（関数（）{$（' が親指。 '）（トグル）。 $（）（トグル）' MAIN1画像。'; \t \t \t \t }）; \t $（ '。thumbs1'）。toggle（）; 。 \t $（ 'MAIN1画像 '）をクリック（関数（）{ \t \t $（' がthumbs1。 '）（トグル）。 $（' 主画像。'）（トグル）。\t \t \t}）; – Rahul
私はthis.but私は2つの別のメイン画像のdivクラスを作成したくない – Rahul
ための作業である：これは何ヨーヨーです
img {
width:42px;
height:42px;
border:0;
}
a {
text-decoration:none;
}<p>The image is a link.</p>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<div>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
</div>ほしい ？ https://jsfiddle.net/bfahmi/2m16vjj1/3/
$(document).ready(function() {
$('.featured-image').on('click', '#btn-display', function() {
if ($('.gallery').is(':visible')) $('.gallery').hide();
else $('.gallery').show();
});
});.images {
width: 50%;
padding: 0 auto;
}
.featured-image,
.gallery {
width: 100%;
text-align: center;
}
.gallery {
display: none;
margin: 10px 0;
}
.featured-image img {
width: 100%;
max-width: 300px;
}
.gallery img {
width: 20%;
max-width: 70px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="images">
<div class="featured-image">
<a id="btn-display" href="#">
<img src="https://placehold.it/300x300/?text=featured-image">
</a>
</div>
<div class="gallery">
<img src="https://placehold.it/300x300/?text=image-1">
<img src="https://placehold.it/300x300/?text=image-2">
<img src="https://placehold.it/300x300/?text=image-3">
<img src="https://placehold.it/300x300/?text=image-4">
</div>
</div>
default.aspの中の画像はありますか？ – mplungjan
いいえ... default.aspは単に画像をクリック可能にするために使用されます – Rahul
私はメイン画像をクリックしたときに2つの画像を表示したいと仮定します。 – Rahul