より良い方法は、背景画像付きのアンカーを配置できることです。簡単なプロセスに従うことができます -
- 背景画像「addToCart.png」とクラス「addToCart」でアンカーを保持します
- クリックすると、クラスが「pleasewait」に変更され、背景画像が「pleasewait.png」に変更されます
- クリックすると、チェックする関数を記述します。クラス「addToCart」がある場合は、デフォルトのリダイレクトを防止します。それ以外の場合は「url2.html」に移動します。
HTML:
<a href="url2.html" id="BigSwatch" class="addToCart"></a>
CSS:
.addToCart {
background-image:url('images/addToCart.png');
display:block;
/* Define width and height */
}
.pleaseWait {
background-image:url('images/pleaseWait.png');
}
Javascript:
$('#BigSwatch').click(function(e){
if($(this).hasClass('addToCart')) {
$(this).removeClass('addToCart').addClass('pleaseWait');
e.preventDefault();
}
});
これがうまくいくことを願っています。