Вы ведь буквально недавно породили тему по сути ничем не отличающую от этой, разница лишь в другом наборе html-элементов, при этом использовалась jQuery. Для чего же вы подключаете эти десятки КБ, если не используете их?
Есть такая замечательная вещь как индекс в наборе, это и массив, это и коллекция элементов, что тоже является по сути массивом. Так вот, эта замечательная вещь позволяет работать с набором, скажем так - анонимно. Мы даже можем не знать всех потрохов каждого элемента из этого набора, но при этом обратиться к каждому элементу набора проблемы не будет.
То есть, если у вас есть один набор элементов, который надо связать с другим набором, то единственное условие, которое необходимо соблюдать для их связи, это соответствие индексов коллекций элементов в каждом из наборов. В контексте DOM это означает, что ваши элементы div должны быть расположены на странице с той же последовательностью, как и радио кнопки, с которыми эти div надо связать. Тогда все просто:
<!DOCTYPE HTML>
<html>
<head>
<style>
#secondary div {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('#primary').on('click', 'input:radio', function() { //обрабатываем события радио кнопок
$('#secondary div').hide() //скрыть все div
.eq($(this).index()) //получить div связанный по индексу радио кнопки
.show() //сделать этот div видимым
})
});
</script>
</head>
<body>
<div id="primary">
<input type="radio" name="as" checked="" />
<input type="radio" name="as" />
<input type="radio" name="as" />
</div>
<div id="secondary">
<div style="display:block">DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>
</div>
</body>
</html>
