JS を約 1 か月間学習し、約 4 つのコースを完了した後でも、サムネイルをクリックしたときに画像を変更する方法がわかりません。私がやりたいことは簡単です。サムネイルがクリックされたときにメイン画像を変更したいだけです! この例では、div に 2 つのサムネイル画像があり、その上にメイン画像があります。サムネイルをクリックしたときにメイン画像を変更したいだけです。私はこれが DOM 操作であることを知っており、次のように考えています。
私は小さなページを作成して、さまざまなことを学び、試してみて、最後にあきらめて助けを求めることができるようにしました! コードは次のとおりです。
#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}
<body>
<div id="MainContainer">
<div id="MainImage"></div>
<div id="TNBodyContainer">
<div id="TNOne">
<div id="TNTwo"></div>
</div>
</div>
助けてくれてありがとう。
マーゲート