показать и скрыть несколько divs при нажатии

Question

У меня есть 3 ссылки, и каждая ссылка указывает на другую версию документа. Как я могу показать/скрыть их?

Прямо сейчас, у меня есть <div id="defaultTemplate">. Это будет значение по умолчанию. Ниже, у меня есть <div id="Option2" class="hidden"> и <div id="Option3" class="hidden">

опции 2 и 3 скрыты, как и должно быть, но я хочу показать/скрыть их, когда пользователь нажимает на ссылки.

Вот мой нерабочим JQuery:

$('.option1, .option2, .option3').click(function(){ 
    var toShow = $(this).attr("class"); 
    console.log(toShow); 
    $('#defaultTemplate').fadeOut(600, function(){ 
     $('#' + toShow).show(); 

    }); 
}); 

Спасибо!

Answer 1

Ваш идентификаторы имеют капитал O в Option2 как этот id="Option2"

как классы, которые вы щелкая имеют небольшой o,

когда вы делаете это -

$('#' + toShow).show(); т.е. $('#option2').show();, их нет ID с option2, но их является ID, Option2

Вы должны изменить свои идентификаторы для option1, option2, option3, с небольшой o

Answer 2

Вы должны использовать #option1, #option2, #option3, возможно, он должен помочь, потому что теперь вы ссылаетесь на классы, не являющиеся идентификаторами.

Answer 3

Вы ищете класс не ид так попробуйте это:

$('.' + toShow).show();

Или, если вы ищете идентификаторы, чем изменить эту строку:

$('#option1, #option2, #option3')

Answer 4

option1 идентификатор не определен , Я думаю, это должен быть первый div.

$('#Option1, #Option2, #Option3').click(function(){ 
    var toShow = $(this).attr("class"); 
    console.log(toShow); 
    $('#defaultTemplate').fadeOut(600, function(){ 
     $('.' + toShow).show(); 

    }); 
});