содержания изменения Jquery по щелчку с несколькими уровнями

Question

Проблема:

Я пытаюсь сделать немного содержимое окно JQuery, посредством которого пользователь нажимает на какую часть они заинтересованы из 3 лучших вариантов уровня. Как только они выбирают один, они видят здесь список ссылок. Нажав на одну из этих ссылок, загрузите видео с YouTube, встроенное в div.

Итак, в настоящий момент у меня есть работа, чтобы пользователь мог щелкнуть вкладку, которая отобразит вкладку. В следующей части, где пользователь нажимает на имя видео, которое затем загружает элемент li или div со встроенными носителями, не работает.

У меня есть демо здесь:http://jsfiddle.net/CVyAD/

Обратите внимание на некоторые из имен классов похожи, я просто быстро бросил это вместе, чтобы попробовать демо мою проблему, как это.

Я не уверен, что приближаюсь к этому в правильной манере, и если может быть лучший способ добиться того, что я делаю. Любые указатели, подсказки будут оценены. Пример близок, но беспорядочен. И я не понимаю, почему 3-й уровень не показывает, я использовал для него тот же принцип, что и уровень выше.

Answer 1

его, потому что ваши идентификаторы прибывали в качестве vidsvid-1 вместо vids1 ... проверить это:

http://jsfiddle.net/CVyAD/2/

-$(document).ready(function() { 
    var activeId = $(".active").attr("id").replace("tab",""); 
    $("#content" + activeId).show(); 


    $(".tab li").click(function() { 
     $(".controls").hide(); 
     $(".tab li.active").removeClass("active"); 
     $(this).addClass("active") 
     var id = $(this).closest("li").attr("id").replace("tab",""); 
     $("#content" + id).show(); 
    }); 

    $(".tabAlt li").click(function() { 
     $(".videos").hide(); 
     $(".tabAlt li.active").removeClass("active"); 
     $(this).addClass("active") 
     var id = $(this).closest("li").attr("id").replace("tabAlt",""); 
     id = id.replace("vid-",""); //this is the line i added 
     $("#vids" + id).show(); 
    }); 
});