자바 스크립트 변경 클래스 onclick

메신저 자바 스크립트/아약스/jQuery로 그립을 얻으려고하기 때문에 내 웹 사이트의 티켓 시스템을 구축해야합니다.자바 스크립트 변경 클래스 onclick

어쨌든, 나는 페이지 상단에 테이블을 가지고 있습니다.

<table align="center" class="thinline" width="600" border="1" cellpadding="2" bordercolor="black"> 
    <tr class="subtopic" style="font-size: 15px;"> 
     <td><a onClick="javascript: ShowNewTickets()">New Tickets</a></td> 
     <td><a onClick="javascript: ShowYourTickets()">Your Tickets</a></td> 
     <td><a onClick="javascript: ShowPuplicTickets()">Public Tickets</a></td> 
    </tr> 
</table>

페이지가로드되면 "새 티켓"에 클래스가 "선택됨"으로 표시됩니다. 선택되지 않은 메뉴 위에 마우스를 올려 놓으면 강조 표시된 효과가 나타납니다. 다른 링크를 클릭하면 "선택한"클래스가 다른 TD에서 제거되고 새 TD에 추가됩니다.

하이라이트 효과를 내기 위해 onmouseover 및 onmouseout을 사용해 보았지만 이미 강조 표시된 링크를 참조 할 때 엉망입니다.

나는 또한 tryed 한

$('.off').live('mouseenter', function() { 
    if ($(this).hasClass('selected') == false) { 
     $(this).removeClass('off').addClass('highlighted'); 
    } 
});

하지만 그 다음 강조 TD를 유지합니다.

읽어 주셔서 감사합니다.

출처

2012-03-13 Bradley Roberts

CSS로만 호버 위에서 색상을 변경할 수 있습니다. 또한 귀하의 질문은 제목에 맞지 않는 것 같습니다. 어쨌든 : 요소를 떠날 때마다, 당신은 클래스를 제거해야만합니다. –

이것은 CSS 문제입니다. – Jivings

그래, 그것은 당신이'a' 요소를 사용하고 있다는 사실을 고려하여 CSS로 더 잘 풀릴 것입니다. ': hover' 셀렉터는 모든 브라우저 (IE6 포함)에서 작동합니다. – Shef

Sergio Tulentsev가 언급했듯이 하이라이트 효과를 처리하려면 의사 클래스 :hover을 사용해야합니다. 내가 .live 또는 .delegate 새로운 JQuery와 기능 .on() 대신 .click을 사용하고

$('.subtopic').on('click', 'a', function(e) { 
    $('.subtopic a').removeClass('selected'); // remove the class from all the links 
    $(this).addClass('selected'); // add it to the clicked link 
}

참고 : "선택"클래스를 처리하기 위해, 당신이 뭔가를 할 수 있습니다. .on() 작동 방식은 .subtopic 행의 링크에만 이벤트를 바인딩하도록합니다. .on()을 사용하면 DOM에 동적으로 새 링크를 추가 할 때도 이벤트가 계속 발생합니다.

출처

2012-03-13 17:23:28 Bram

답장을 보내 주셔서 감사합니다. 나는 이것을 지금 시도 할 것이다! –

@BradleyRoberts 흠, 방금 잘못된 클래스 이름을 사용하고있는 것을 보았습니다. 강조 표시를 사용하고있는 것을 볼 수 있으므로 클래스 이름을 전환해야 할 수도 있습니다. jQuery 코드는 대부분 읽기 쉽기 때문에 필자의 예제가 충분하기를 바랍니다. – Bram

조금 바꿨습니다. css doesn''t는 돌에서 설정되는 단지 isn''t 단지 모든 것을 멋지게 보이기 위해 시험해 보려고 노력한다 : 나는 필요로하게되었던 지역을 채우는 wasnt와 함께 심지어으로서 td로 a를 바꿨다. –

:hover pseudo-class을 사용해야합니다.

마우스 오버/아웃을 처리합니다.

출처

2012-03-13 17:09:29

.toggleClass()을 확인하십시오. 이름에서 알 수있는 것처럼 작동합니다.

출처

2012-03-13 17:12:21 CBusBus

아 그래,이 일을 할 것 같습니다 :)! 감사합니다. –

자바 스크립트 변경 클래스 onclick

답변

관련 문제