1

画像をクリックするとドロップ シャドウが表示されるようにします。現時点では Jquery を使用していないため、可能であれば Java スクリプト ソリューションを提供してください。ここに私のフィドルがあります：http://jsfiddle.net/zUNhD/7/

また、現在選択されているアイテムでのみボックスの影がアクティブになるようにしたいと思います。(最後にクリックされた項目だけが影付きである必要があります)

    window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]
    console.log(img1);

    img1.onclick = function(){
    img1.setAttribute("class", "BoxShadow");
   };
   };
4

3 に答える 3

2

コードで関数が呼び出されていません。

window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0];      
img1.onclick = function(){
img1.setAttribute("class", "DropShad");
};
}();

ここに作業フィドルがあります... http://jsfiddle.net/zUNhD/18/

于 2012-11-05T09:51:22.360 に答える
2

コメントからの拡張:

セレクターを使用:activeして「クリック」イベントに:focus応答し、セレクターを使用して「フォーカス」イベントに応答できます。

input:active, input:focus{
    box-shadow:2px 2px 2px blue;
}

フィドル

于 2012-11-05T09:31:44.620 に答える
1

コードの簡略化については、この jsfiddleを参照してください。css クラスが正しく割り当てられていません。先頭にドットを付ける必要があります。script タグを終了</body>タグの近くに置き、次を使用します。

var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]

img1.onclick = function(){
  img1.className = "DropShad";
};
于 2012-11-05T09:17:29.517 に答える