0

誰か次の方法を教えてください

.logo {
display: block;
text-indent: -9999px;
text-transform: capitalize;
background: url(../images/menu.png) no-repeat;
height: 120px;
}

クリックすると画像が変わる

background: url(../images/menu_open.png) no-repeat;

このための HTML は

<div class="sidebar">
<a href="#" onclick="return showOrHide('menulink');"><div class="logo">TEST IMAGE</div></a>
<ul id="menulink">

現在、アイコンをクリックすると、メニューが開いたり閉じたりしますが、

http://carbonyzed.co.uk/menu/2/index.html http://carbonyzed.co.uk/menu/2/css/style.cssで完全なコードを表示し ます。

ありがとう

4

3 に答える 3

3 
$(".logo").click(function() {
  $(this).css('background-image', 'url(../images/menu_open.png)');
});
于 2012-11-06T13:39:30.207 に答える
1

最高のユーザー エクスペリエンスを実現するには、スタイル属性を変更するのではなく、スプライトを使用し、クリック時にクラスを変更することを検討してください。menu_sprite.png という 1 つのスプライトに 2 つの画像があるとします。

画像の高さは 240px で、ロゴの幅です。デフォルトの画像は左上にあり、「開いている」画像は右下にあります。

CSS

.logo{
  background-image: url(../images/menu_sprite.png) 0 0 no-repeat;
}

.logo.open{
  background-position: 0 -120px;
}

jQuery

$('.logo').click(function(){ $(this).toggleClass('open'); });

この方法により、プリローダーを使用せずに、画像のない一瞬を回避できます。

于 2012-11-06T13:54:52.907 に答える
0

これはうまくいくはずです

<a href="#" onclick="return ShowOrHide('menulink'); document.getElementById('id').style.background = 'url(img.img) no-repeat';" />;
于 2012-11-06T13:42:34.913 に答える