Разбитого JQuery Tab Switcher

Question

печень Демо:https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html

JQuery Tab Переключить кодигнорировать линии 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.

Единственное отображаемое содержимое переключателя табуляции является частью второго сверху, а не всего. Я просто очень смущен в этот момент времени и действительно могу с некоторой помощью справиться.

---

Update:

$('#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. Итак, $(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, он не будет соответствовать, потому что дивам есть строка идентификаторы

Редактировать

Вы можете показать все дочерние элементы, используя следующее:

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

Редактировать 2

Т он выбирает самый глубокий элемент div внутри #tab-content и показывает его: <div id="Social-Fun" style="display: none;">

Вот почему вы ничего не видите.

Вы можете добавить класс к каждому DIV, что-то вроде class='country' и тогда вы могли бы сделать:

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