Здравствуйте, господа знатоки!
Столкнулся со следующей проблемой: есть сайт, на нем раздел "отзывы", в этом разделе несколько div'ов олицетворяющих табы (вкладки). Так вот в одном из этих контейнеров содержится код комментов facebook, а в другом ВКонтакте. Если во всех дивах поставить статичный контент, то вкладки работают без проблем, но когда я в один из табов вставляю код комментов соц.сети, то они тупо не прогружаются и на их месте просто пустое место. Вкладки продолжают работать, но как-будто я ничего не вставлял.
Внимание вопрос: как сделать так, чтобы все работало и переключая вкладки видно было и контактовские и фейсбуковские комменты? Где я ошибся?
CSS не привожу за ненадобностью (имхо)
<ul id="tabs">
<li><a href="#here" name="#tab1">На сайте</a></li>
<li><a href="#facebook" name="#tab2">FaceBook</a></li>
<li><a href="#vk" name="#tab3">ВКонтакте</a></li>
<li><a href="#other" name="#tab4">Другие...</a></li>
</ul>
<div id="tabcontainer">
<div id="tab1">
<p>Отзывы на этом сайте</p>
</div>
<div id="tab2">
<p>
ЗДЕСЬ КОД КОММЕНТАРИЕВ FACEBOOK
</p>
</div>
<div id="tab3">
<p>
ЗДЕСЬ КОД КОММЕНТАРИЕВ ВКОНТАКТЕ
</p>
</div>
<div id="tab4">
<p>Отзывы из других мест</p>
</div>
</div>
function resetTabs(){
$("#tabcontainer div").hide();
$("#tabs a").attr("id","");
}
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0,4);
(function(){
$("#tabcontainer div").hide();
$("#tabs li:first a").attr("id","current");
$("#tabcontainer div:first").fadeIn();
$("#tabs a").on("click",function(e) {
//e.preventDefault();
if ($(this).attr("id") == "current"){
return
}
else{
resetTabs();
$(this).attr("id","current");
$($(this).attr('name')).fadeIn();
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='"+myUrlTab+"']").attr("id","current");
$(myUrlTab).fadeIn();
}
}
})()
