2 개의 jquery UI 탭을 동기화 상태로 유지

Question

두 개의 jquery UI 탭을 동기화 상태로 유지하려고합니다. 홈페이지에 here 탭이 있습니다. 기본적으로 휴스턴을 클릭하면 다른 휴스턴 탭을 클릭해야하며 오스틴도 마찬가지입니다. 여기

내가 무슨 짓을 (지금은 그것으로 인해 매우 느리다에 코드를 제거한) :

jQuery(document).ready(function(){ 
    jQuery("a[href='#houston']", ".wp-tabs").on("click", function(){ 
     jQuery("a[href='#houston_locations']", ".wp-tabs").click(); 
    }); 

    jQuery("a[href='#austin']", ".wp-tabs").on("click", function(){ 
     jQuery("a[href='#austin-3']", ".wp-tabs").click(); 
    }); 

    jQuery("a[href='#houston_locations']", ".wp-tabs").on("click", function(){ 
     jQuery("a[href='#houston']", ".wp-tabs").click(); 
    }); 

    jQuery("a[href='#austin-3']", ".wp-tabs").on("click", function(){ 
     jQuery("a[href='#austin']", ".wp-tabs").click(); 
    }); 
}); 

작품 위의 내 코드; 그러나 그것은 매우 느리고 또한 콘솔에서 "너무 많은 재귀"에 대한 오류를 제공합니다.

다른 사람이 더 나은 해결책을 제공 할 수 있습니까?

Answer 1

난 당신이

jQuery(document).ready(function(){ 
jQuery("a[href='#houston']", ".wp-tabs").on("click", function(){ 
    $("a[href='#houston_locations']", ".wp-tabs").trigger("click"); 
}); 

jQuery("a[href='#austin']", ".wp-tabs").on("click", function(){ 
    jQuery("a[href='#austin-3']", ".wp-tabs").trigger("click"); 
}); 

jQuery("a[href='#houston_locations']", ".wp-tabs").on("click", function(){ 
    jQuery("a[href='#houston']", ".wp-tabs").trigger("click"); 
}); 

jQuery("a[href='#austin-3']", ".wp-tabs").on("click", function(){ 
    jQuery("a[href='#austin']", ".wp-tabs").trigger("click"); 
}); 

으로 시도 할 수 있기를 바랍니다

});

Answer 2

휴스턴 탭 중 하나를 클릭 할 때마다 두 번째 휴스턴 탭의 클릭 이벤트가 발생하고 두 번째 휴스턴 탭의 클릭 이벤트가 발생합니다. 이것은 브라우저가 "충분"하다고 판단 할 때까지 계속 발생하므로 (너무 느리게 실행되는 이유는) 오류 콘솔이 "너무 많은 재귀"로 참조하는 것입니다.

이 문제를 해결하려면 각 탭의 기본 클릭 방법을 별도의 함수로 분리하고 각 클릭 이벤트 내에서 해당 함수를 모두 호출해야합니다.

도움이 되길 바랍니다.