2014-03-06 2 views
0

탭을 선택할 때 탭의 "모양"을 변경하려고합니다. 이 question과이 question을 보았지만 이것을 구현하는 방법을 잘 모르겠습니다. 간단하게하기 위해 나는 JSFiddle에 게시 된이 정확한 예를 사용하고 있습니다.javascript로 html의 탭 색상 변경

나는 새 탭을 클릭하면 내 CSS 코드의이 부분은 적용하지 않는 것

:이 예를 보면, 변경 탭, 해당 탭의 내용 변경이 아닌 표시됩니다

.tabContainer .digiTabs .selected { 
    background-color: #fff; 
    color: #393939; 
    border-left: 1px solid #e1e1e1; 
    border-top: 1px solid #e1e1e1; 
    border-right: 1px solid #e1e1e1; 
    } 

선택된 탭의 표정. 내용이 변경 될 수 있지만 탭 색상/배경 만 변경되지 않습니다.

내 현재 작업은이 예제를 자세히 따르므로 제공 할 수있는 도움이 필요합니다. 또한, 나는이 물건에 대한 멍청한 행동을하고 있는데, 나는 아마도 다른 두 가지 질문으로부터 답을 이해할 수 없을 것이다. 감사!

+1

당신이 탭을 클릭에'selected' 클래스를 추가하지 않기 때문에, http://jsfiddle.net/NRkL9/51/ –

+0

http://jsfiddle.net/NRkL9/60/ – Sebsemillia

+0

이 작동! 감사! – mcfly

답변

2

먼저, .bind 대신에 $ (document) .on()을 사용하십시오 (더 이상 사용되지 않음).

$(document).on("click", ".t", function(){ 
     $(".tabContent").each(function(){ 
      $(this).hide(); 
     }); 
     var id = $(this).attr("id"); 
     $("#t"+id).show(); 
     $('.t').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
+0

필자는 "바인딩"을 문서로 변경하고이를 패트릭 에반스의 코드와 결합하여 완벽하게 작동합니다! 감사 – mcfly