Question

在div中我有一个锚标记。该锚标记具有使用CSS分配给它的背景图像。

当用户点击它时，会执行一些JavaScript，但我想将背景图像更改为另一个，然后当他们再次点击它时，背景图像会变回原来的状态。

任何有关如何执行此操作的帮助（JQuery，CSS;我不确定）将非常感激。

提前致谢。

Answer 1

您可以使用toggleClass更改背景图片。

$('#div1').click(function(){
    $(this).toggleClass('class2');
});

<强> Live Demo

Answer 2

在状态更改之前将锚的属性保存到变量中。然后将该变量添加到对象的data中。从这里开始，我们可以在链接中添加一个类来测试我们需要服务的场景。出于本示例的目的，我使用了颜色和background-color属性，您可以非常轻松地更改它以满足您的需求。

<强> Here's the working jsFiddle of my example

这是HTML结构 - ＆gt;

<div>
  <a href="#" style="background-color:blue;">
    Click To Change
  </a>
</div>

这是jQuery - ＆gt;

$('a').click(function(){
  if($(this).hasClass('clicked')){
    $(this).css('background-color', $(this).data('oldbg'));
    $(this).removeClass('clicked');
  }else{
    $(this).addClass('clicked');  

    var oldBG = $(this).css('background-color');
    //the above stores the original css properties to a variable 'oldBG'

    $(this).data('oldbg', oldBG);
    //set the data of this object to the properties of the initial background.
    $(this).css('background-color', 'red');  
  }
});

在点击上切换锚点标记背景

2 个答案: