JQuery와 탭, 문제 변질 선택한 요소

Question

내가 프로젝트에 대한 http://jqueryfordesigners.com/jquery-tabs/을 사용하고

는 탭 이동의 코드는 다음과 같습니다 : -

<script type="text/javascript" charset="utf-8"> 
$(function() { 
var tabContainers = $('div.tabs > div'); 
tabContainers.hide().filter(':first').show(); 

$('div.tabs ul.tabNavigation a').click(function() { 
tabContainers.hide(); 
tabContainers.filter(this.hash).show(); 
$('div.tabs ul.tabNavigation a').removeClass('selected'); 
$(this).addClass('selected'); 
return false; 
}).filter(':first').click(); 

}); 
</script> 

이 잘 작동하지만, 디자인이 난에 선택한 클래스를 삽입해야합니다 li 태그가 아니라 태그입니다. 이 작업을 수행하도록 스크립트를 변경하면 각 탭의 표시/숨기기가 중단됩니다. 그 밖의 무엇을 바꾸어야하는지에 대한 생각? 미리 감사드립니다.

<script type="text/javascript" charset="utf-8"> 
$(function() { 
var tabContainers = $('div.tabs > div'); 
tabContainers.hide().filter(':first').show(); 

$('div.tabs ul.tabNavigation li').click(function() { 
tabContainers.hide(); 
tabContainers.filter(this.hash).show(); 
$('div.tabs ul.tabNavigation li').removeClass('selected'); 
$(this).addClass('selected'); 
return false; 
}).filter(':first').click(); 

}); 
</script> 

Answer 1

자세한 내용은없이 귀하의 질문에 대답하기 조금 어렵다. 누락 된 가장 중요한 정보는 현재 HTML과 CSS입니다. 왜 그것이 작동하지 않는지 추측 할 수 있기 때문입니다. 당신의 CSS를해야,

<script type="text/javascript" charset="utf-8"> 
$(function() { 
     var tabContainers = $('div.tabs > div'); 
     tabContainers.hide().filter(':first').show(); 

     $('div.tabs ul.tabNavigation li a').click(function() { 
      tabContainers.hide(); 
      tabContainers.filter(this.hash).show(); 
      $('div.tabs ul.tabNavigation li').removeClass('selected'); 
      $(this).closest('li').addClass('selected'); 
      return false; 
     }).filter(':first').click(); 

    }); 
</script> 

또한 :

gnarf에서 ​​언급 한 바와 같이

, 당신의 코드는 당신이에서이 코드를 가지고 페이지에서 사용 예제 HTML 및 CSS 작업을 얻기 위해 조금 변경해야 또한 selected 클래스가 A. 대신 LI에 설정 되었기 때문에 변경되었습니다. JQuery UI에서 제공하는 탭 플러그인을 사용하지 않는 이유가 궁금합니다. 그것은 당신이 많은 것을 구성하게하고 어떤 코드도 거의 요구하지 않는다.

Answer 2

당신은 당신이 원하는 것을 얻기 위하여려고하고 있지 않은 <li>에 this.hash 액세스 할 수 있습니다.

귀하의 기능은 조금 변경해야 :

$(function() { 
    var tabContainers = $('div.tabs > div'); 
    tabContainers.hide().filter(':first').show(); 

    // you still want to bind to the "a" element, not the li 
    $('div.tabs ul.tabNavigation a').click(function() { 
    tabContainers.hide(); 
    // this.hash is the #whatever portion of the href 
    tabContainers.filter(this.hash).show(); 

    // remove selected class from LI's 
    $('div.tabs ul.tabNavigation li').removeClass('selected'); 

    // look for our closest li parent (jQuery 1.3+) and add the selected class. 
    $(this).closest('li').addClass('selected'); 

    return false; 
    }).filter(':first').click(); 

});