Как отображать различный контент, когда пользователь выбирает переключатель?

Question

Я хочу сделать одну особенность. HTML/PHP не проблема, но мой навык JavaScript очень низок. Я знаю, как его использовать, но я не знаю, как написать такое. Он должен выглядеть like this example.

Под рисунком есть нечто, называемое «MILESTONE», но в этом случае действие onhover. Я хочу использовать событие onclick и набор переключателей. Когда пользователь нажимает на один из трех переключателей, страница будет изменять изображение и описание, в зависимости от того, какой из них был нажат - и без обновления страницы.

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

Answer 1

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

Дать это в JQuery, но вы должны быть в состоянии перевести его, если вы не используете JQ:

HTML:

<input type="radio" name="picker" class="picker" value="1"/> 
<input type="radio" name="picker" class="picker" value="2"/> 
<input type="radio" name="picker" class="picker" value="3"/> 

<ul class="content"> 
    <li><img src="foo1"/></li> 
    <li><img src="foo2"/></li> 
    <li><img src="foo3"/></li> 
</ul> 

CSS:

.content li { display: none; } 
.content li.active { display: block; } 

JavaScript:

$('.picker').on('click', function() { 
    $('.content .active').removeClass('active'); 
    $('.content li').eq($(this).val() - 1).addClass('active'); 
}); 

W Пример orking: http://jsfiddle.net/9SdvZ/1/

Answer 2

Если ваши навыки достаточно хороши в HTML & CSS, тогда вы будете знать, как правильно его подстроить. Вот пример кода, который я только что сделал, который имеет JavaScript (функциональность).

Живой пример: http://embed.plnkr.co/xdpHX9FplgLgh9pN7lWZ/preview

Объяснение:

Вы будете иметь следующий HTML-код:

<div id="controls"> 
    <input type="radio" name="slide" value="slide1.html"> 1 
    <input type="radio" name="slide" value="slide2.html"> 2 
    <input type="radio" name="slide" value="slide3.html"> 3 
</div> 

И вы будете иметь следующий JavaScrit с помощью JQuery:

$(function(){ 
    $('#controls').on('click', ':radio', function(e) { 
    var target = $(e.target); 
    $.get(target.val(), function(data) { 
     $('#content').html(data); 
    }); 
    }); 
}); 

В принципе, JavaScript (с использованием jQuery) будет выполнять следующие действия: после нажатия на переключатель кнопка <div id="controls" /> будет заменена содержимым файла, указанного в атрибуте значения переключателя.