Question

我想在点击图片时出现投影。我目前不使用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");
   };
   };

Answer 1

延伸评论：

您可以使用:active选择器来响应“点击”事件，使用:focus选择器来响应“关注”事件：

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

fiddle

Answer 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/

Answer 3

有关代码的一些简化，请参阅this jsfiddle。 css类没有正确分配，它应该以一个点开头。将您的脚本标记放在结尾</body>标记附近，然后使用：

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

img1.onclick = function(){
  img1.className = "DropShad";
};

点击框阴影阴影 - Javascript（不是jquery）

3 个答案: