2011-01-03 7 views
0

탭과 같은 메뉴 탐색 정렬을 만들려고합니다. 수직 버튼이 있습니다. 페이지를 시작하면 첫 번째 li 클래스가 제거되고 다른 링크를 클릭하면 nothign이 발생합니다. 그 외의 경우 내 콘텐츠 div가 표시됩니다 ..jquery에서 클래스 추가/제거 문제가 있습니다.

첫 번째 링크는 항상 페이지 시작시 활성화되어야합니다.

<script type="text/javascript"> 
$(document).ready(function() { 

    var tabContainers = $('div.pages > div'); 

    $('div.sidemenu ul.list a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.sidemenu ul.list li').removeClass('active'); 
     $(this).addClass('active'); 

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


}); 
</script> 
<div class="sidemenu"> 
    <ul class="list"> 
<li class="active"><a href="#first">Login & Password</a></li> 
<li><a href="#second">Contact Details</a></li> 
<li><a href="#third">Company & Branch Details</a></li> 
<li><a href="#forth">Address Details</a></li> 
    </ul> 
</div> 

<div class="pages"> 
    <div id="first"> 
    CONTENT 1 
    </div> 
    <div id="second"> 
    CONTENT 2 
    </div> 
    <div id="third"> 
    CONTENT 3 
    </div> 
    <div id="forth"> 
    CONTENT 4 
    </div> 
</div> 

내가 여기 놓친 거지 무슨 .. 어쩌면 그 cuase 난 그냥 아직도 커피 .. 내 첫 잔에 일어났다 확실하지 않음)

+0

jQuery 용 사용자 정의 컴포넌트/스크립트를 작성하는 경우이 기사를 읽으십시오. http://docs.jquery.com/Plugins/Authoring 초보 사용자에게 다소 위협적 일 수 있지만 실제로는 강력합니다. –

답변

3
당신은 <a> 요소에 클래스를 추가하고

, 하지만 상위 요소 인 <li> 요소에서 제거해야합니다. 당신은 클래스가 할 수 <li>에 대한 의도처럼

$(this).addClass('active'); // "this" is the <a> that received the event 

    // This removes "active" from the <li> 
$('div.sidemenu ul.list li').removeClass('active'); 

보인다.

$(this).parent().addClass('active'); 

을 또는 당신이 괜찮다면 나에 약간의 DOM API를 혼합 : 그래서 당신이 대신 할 거라고 지금 리필 가서

$(this.parentNode).addClass('active'); 

! ; O)

+0

좋아 .. 나는 커피 부족으로 그것을 비난해야한다! 감사합니다! 나는 DOM을 많이 사용하지 않았고, 배울 좋은 자원은 무엇입니까? – Dennis

+0

@Dennis : 내가 배웠던 것의 대부분은 [quirksmode] (http://www.quirksmode.org/compatibility.html)에서 찾아보고 시도하고 있습니다. 브라우저 호환성에 대한 좋은 개요를 제공합니다. – user113716

3

당신은 내가 당신이 LI-요소에 추가 할 추측 A-요소

$(this).addClass('active'); 

에 "활성"클래스를 추가, 그래서 하나 추가

$(this).parent().addClass('active'); 

또는 LI 요소에 onclick을 등록하십시오.

관련 문제