使用CSS进行Onclick功能

时间:2012-04-10 06:14:26

标签: javascript jquery html css

我正在尝试使用CSS设计公交车座位安排,我用CSS完成了悬停部分,但接下来的部分是选择座位,点击后应该在背景图像中进行更改。 我为每个座位使用不同的ID。使用以下代码

.myClass {
    background:url('images/transparent-backgro-seatlayout.gif') 0 -60px;
}

document.getElementById("w1").className += " myClass";

但这不起作用。由于我对java脚本了解不多,我无法解决我的问题。请帮助。

3 个答案:

答案 0 :(得分:1)

如果你使用jQuery,这可能很简单:

$("#w1").click(function() {
  $(this).addClass('myClass');
});

请注意,通过使用$(this),您可以自动引用单击的元素。这很方便,因为你提到有许多可点击的座位,每个座位都有一个唯一的ID。不是为每个可点击的座位(“w1”,“w2”等)手动创建事件处理程序,而是使用与任何座位匹配的选择器更简单。假设所有座位都位于ID为“seat”的标签内,并且每个座位都标有“a”标签:

$("#seats a").click(function() {
  $(this).addClass('myClass');
});

所以你的标记会是这样的:

<div id="seats">
  <a id="w1">seat 1</a>
  <a id="w2">seat 2</a>
  ....
</div>

此外,如果您希望用户能够再次单击座位以取消选择,请使用toggleClass而不是addClass:

$("#seats a").click(function() {
  $(this).toggleClass('myClass');
});

请注意,您不必使用jquery来实现所有这些。你可以用原始的javascript做,或者你可以使用不同的JavaScript框架。但是如果你有选择的话,那么jquery可以让你更容易编码。

答案 1 :(得分:0)

我建议您使用jQuery which allows easily this kind of thing。在你的情况下你会有

 $("#w1").addClass("myClass");

答案 2 :(得分:0)

function changeImage(this){
   var el;
   el.classname = 'updatedImgClass';
}

当我们通过传递它的对象

点击特定座位时触发上述功能