jQuery로 이미지를 동적으로 변경하십시오.

텍스트 및 아이콘으로 된 탭 세트가 있습니다. 활성 탭에는 파란색 텍스트와 아이콘이있는 흰색 배경이 있습니다. 다른 탭은 반대입니다. 내가하고 싶은 일은 아이콘이 활성화되었을 때 단순히 아이콘을 동적으로 변경하는 것입니다. 파란색 아이콘은 작동하지만 활성화되어 있지 않으면 흰색으로 변경되지 않습니다. 여기 jQuery로 이미지를 동적으로 변경하십시오.

내가 가진 무엇 :

if ($('#project_details').hasClass('active')) { 
    $('#tab1').attr('src','img/blue.png'); 
} else { 
    $('#tab1').attr('src','img/white.png'); 
}

HTML : 그것은 CSS 의사 클래스이기 때문에

이는 active 클래스가 이미 브라우저에 의해 자동으로 요소에서 추가 및 제거

<li id="project_details" class="active"> 
<img src="" id="tab1">Project Details</li>

출처

2014-11-19 Professor B

코드가 정상적으로 처리됩니다. 코드가 실행되도록 트리거하는 이벤트가 궁금합니다. – fpsColton

이벤트에 의존하지 않는 CSS 및 배경 이미지를 사용해야하거나 2) 이벤트 콜백을 구성하는 데 도움이되도록 탭에 사용하는 메커니즘을 공유해야합니다. – isherwood

탭 (http://getbootstrap.com/javascript/#tabs)에 부트 스트랩 jquery를 사용하고 있습니다. –

입니다 . src 속성을 변경하는 코드는 괜찮아 보이지만 실행할 코드를 트리거하는 것이 아무것도 표시되지 않습니다. (참고 : 이것은 수동으로 추가/제거 active 제거 이전 답변에 대한 응답입니다.)

이 if 문을 정확히 실행 하시겠습니까? 사용자가 다른 탭을 클릭하면? 그렇다면 jQuery를 사용하여 탭의 click 이벤트에 대한 이벤트 핸들러를 작성합니다.

출처

2014-11-19 18:13:22 fpsColton

'.on ('click')'시도했지만 작동하지 않았습니다. 네가 말하는거야? –

사실, 부모 'ul' 요소와 같이 탭을 그룹화하는 공통 요소를 식별하는 것이 좋습니다. $ ('ul li')와 같은 선택기를 만들 수 있습니다. ('click', function (e) {// code}); 따라서'ul' 내부의'li'을 클릭하면 코드 블록이 트리거됩니다. – fpsColton

일했습니다! 감사! –

jQuery로 이미지를 동적으로 변경하십시오.

답변

관련 문제