깨진 jQuery를 탭 스위처

Question

간 데모 :https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html

jQuery를 탭 스위치 코드무시 라인 2-6

$(function() { 
    $("#clickme").toggle(function() { 
     $(this).parent().animate({right:'-300px'}, {queue: false, duration: 500}); 
    }, function() { 
     $(this).parent().animate({right:'-0px'}, {queue: false, duration: 500}); 
    }); 
    $('#tab-content div').hide(); 
    $('#tab-content div:last').show(); 

    $('#Info-Side-Tabs li').click(function() { 
     $('#Info-Side-Tabs li').removeClass("current"); 
     $(this).find('li').addClass("current"); 
     $('#tab-content div').hide(); 

     var indexer = $(this).index(); //gets the current index of (this) which is #nav li 
     $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
    }); 
}); 

나는 문제가 내 웹 사이트로 jQuery를 탭 스위치를 구현하는 데 문제 :

"$(this).find('li').addClass("current");" 

'a'를 찾으려고하지만, 나는 그것을 li의 클래스가 아니라 a의 클래스를 변경해야합니다.

표시되는 탭 스위치 콘텐츠는 상단의 두 번째 부분이며 일부는 전부가 아닙니다. 나는이 순간에 매우 혼란스러워서 정말로 도움이 될 수 있습니다.

---

업데이트 :

$('#Info-Side-Tabs li').removeClass("current"); 

Seems to be removing the class upon clicking, however 

    $(this).find('li').addClass("current"); 

Does not seem to add the class to the new clicked tab. 

    $("#tab-3").toggle(function() { 
     // $('#Map-Selection-Info').animate({right:'-976px'}, {queue: false, duration: 500}); 
     $('#Map-Selection-Info').animate({marginLeft: '976px'}, 1000).addClass('current'); 
    }, function() { 
     $('#Map-Selection-Info').animate({right:'670px'}, {queue: false, duration: 500}); 
    }); 

I am trying to apply the above to the 'Hide This' tab, so when you click on it, it move further right out of view and recliick to show. 

Full Script So Far: 
$(function() { 
    $("#tab-3").toggle(function() { 
     // $('#Map-Selection-Info').animate({right:'-976px'}, {queue: false, duration: 500}); 
     $('#Map-Selection-Info').animate({marginLeft: '976px'}, 1000).addClass('current'); 
    }, function() { 
     $('#Map-Selection-Info').animate({right:'670px'}, {queue: false, duration: 500}); 
    }); 
    $('#tab-content div').hide(); 
    $('#tab-content div:last').show(); 

    $('#Info-Side-Tabs li').click(function() { 
     $('#Info-Side-Tabs li').removeClass("current"); 
     $(this).find('li').addClass("current"); 
     $('#tab-content div').hide(); 
     var href = $(this).find('a').attr("href"); 
     $('#tab-content div' + href).fadeIn().find('*').show(); 
    }); 
}); 

Answer 1

.find('li')를 제거합니다.

li 요소에서 click 이벤트가 발생하므로이 작업이 필요하지 않습니다. 따라서 $(this)은 li 요소입니다.

그런 다음 당신이 할 : 다른 나를 위해 작동

$('#Info-Side-Tabs li').click(function() { 
    $('#Info-Side-Tabs li').removeClass("current"); 
    $(this).addClass("current"); 
    $('#tab-content div').hide(); 
    var href = $(this).find('a').attr("href"); 
    $('#tab-content div' + href).fadeIn() 
}); 

, 거기에는 "#의 TAB2"와 "#의 tab3에"콘텐츠 div의 존재하지 않습니다보다. div의가 있기 때문에 일치하지 않습니다, 인덱스가 숫자이기 때문에 인덱스 코드가 작동을 wouldnt 당신은 콘텐츠 사업부를 일치 시키려면 문자열 ID의

편집

당신이 사용하는 모든 자식 요소를 표시 할 수 있습니다 다음 :

$('#tab-content div' + href).fadeIn().find('*').show();

편집 2

T 그는 :last 셀렉터가 #tab-content 안에있는 가장 깊은 div 요소를 찾고 표시하고 있습니다 : <div id="Social-Fun" style="display: none;">

그래서 아무 것도 보이지 않습니다.

당신은 class='country'처럼, 각 사업부에 어떤 클래스를 추가 할 수 있습니다 그리고 당신은 할 수 :

$('#tab-content div.country').last().show()