자바 스크립트 클래스의 변화가 온 클릭 이미지

Question

나는 간단한 스타일 규칙을 사용하고

을 ... 재배치

간단한 자바 스크립트 이벤트와 함께

.off { float: left; background: url(image.png); } 
.on { background: url(different_image.png); } 

...에서 이미지를 변경하기 위해

<a href="#"> 
<div class="off" onclick="this.className='on'; return false;"> 
link 
</div> 
</a> 

클릭시 내 탐색 바. 좀 더 자세한 통찰력을주기 위해, 나는 클릭 한 번 찢어진 항공권의 이미지와 함께, 링크에 대한 "인정 하나"티켓의 이미지를 사용하고 있습니다. 본질적으로, ": 활성"(마우스가 계속 클릭되는 동안에 만 적용됨)이 아니라 클릭 한 번으로 티켓을 찢는 작업을 원합니다. 나는 이미지를 바꿀 필요가있다. 아마도 방문한 티켓이 찢어 지도록하기 위해 아마도 ": visited"유사 요소를 사용할 것이다.

내 문제는 다음과 같습니다. 링크를 클릭하면 내 링크가 탐색 막대의 떠 다니는 위치에서 일부 (겉보기에는 실제로는 아님) 위치의 상단 근처에있는 임의의 위치로 이동한다는 점을 제외하면 Javascript가 올바르게 작동하는 것 같습니다. 내 페이지.

클릭하면 스크립트에서 내 CSS를 무시하는 것 같습니다. 무엇이 누락 되었습니까?

"새로운"클래스에 대해 새로운 규칙 세트를 지정하거나 복제해야합니까? Javascript가 요소 전체를 실제로 변경합니까? 나는 JS로 빤다.하지만 나는 CSS에 대해 매우 확고하다.

미리 감사드립니다.

Answer 1

둘 모두에 float:left이 필요합니다.

.off { float: left; background: url(image.png); } 
.on { float: left; background: url(different_image.png); }