つい最近jQueryのコピペをやめて一からJavaSpriptの勉強をはじめ自分でいろいろなものをつくってみています。
サムネイル画像をクリックするたびにメインの画像が切り替わるようにしたいと思っています。
HTML
1<div id="main-wrapper"> 2 <a href=""><img src="../images/img01.jpg" class="on" id="img1"></a> 3 <a href=""><img src="../images/img02.jpg" class="off" id="img2"></a> 4 <a href=""><img src="../images/img03.jpg" class="off" id="img3"></a> 5 <a href=""><img src="../images/img04.jpg" class="off" id="img4"></a> 6</div> 7<div class="sub-wrapper"> 8 <input type="image" src="../images/img01.jpg" name="img1" checked onclick="img1()"> 9 <input type="image" src="../images/img02.jpg" name="img2" onclick="img2()"> 10 <input type="image" src="../images/img03.jpg" name="img3" onclick="img3()"> 11 <input type="image" src="../images/img04.jpg" name="img4" onclick="img4()"> 12</div>
CSS
1#main-wrapper .on { 2 display: block; 3} 4#main-wrapper .off { 5 display: none; 6}
JavaScript
1function img1(){ 2 document.getElementById("img1").className="on"; 3 document.getElementById("img2").className="off"; 4 document.getElementById("img3").className="off"; 5 document.getElementById("img4").className="off"; 6} 7function img2(){ 8 document.getElementById("img1").className="off"; 9 document.getElementById("img2").className="on"; 10 document.getElementById("img3").className="off"; 11 document.getElementById("img4").className="off"; 12} 13function img3(){ 14 document.getElementById("img1").className="off"; 15 document.getElementById("img2").className="off"; 16 document.getElementById("img3").className="on"; 17 document.getElementById("img4").className="off"; 18} 19function img4(){ 20 document.getElementById("img1").className="off"; 21 document.getElementById("img2").className="off"; 22 document.getElementById("img3").className="off"; 23 document.getElementById("img4").className="on"; 24}
自分でできる限り考えて作ってみたのですが非常に長くなってしまいました。
他にもっと短く書ける書きかたを教えてください。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。