Извините за то, что я задал этот вопрос, но я поражен. Я намеревался этот код перечислить вопросы до окончания теста. Вместо этого, сразу после переключения divs, он возвращается к вопросу 1 по неизвестной причине =\
Пожалуйста, любезно помогите и спасибо вперед!
<html>
<head>
<body>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
return;
}
function divswitcher(d1,d2) {
toggle_visibility(d1);
toggle_visibility(d2);
return;
}
</script>
<div id="q1" style="display: block">
Q1 text
<ul>
<li><input type="radio" name="q1" value="q1a1"/>Q1A1 text</li>
<li><input type="radio" name="q1" value="q1a2"/>Q1A2 text</li>
<li><input type="radio" name="q1" value="q1a3"/>Q1A3 text</li>
<li><input type="radio" name="q1" value="q1a4"/>Q1A4 text</li>
</ul>
<a href="" onclick="divswitcher('q1','q2');" />Next</a>
</div>
<div id="q2" style="display: none">
Q2 text
<form>
<ul>
<li><input type="radio" name="q2" value="q2a1"/>Q2A1 text</li>
<li><input type="radio" name="q2" value="q2a2"/>Q2A2 text</li>
<li><input type="radio" name="q2" value="q2a3"/>Q2A3 text</li>
<li><input type="radio" name="q2" value="q2a4"/>Q2A4 text</li>
</ul>
<a href="" onclick="divswitcher('q2','q3');" />Next</a>
</form>
</div>
<div id="q3" style="display: none">
Q3 text
<form>
<ul>
<li><input type="radio" name="q1" value="q3a1"/>Q3A1 text</li>
<li><input type="radio" name="q1" value="q3a2"/>Q3A2 text</li>
<li><input type="radio" name="q1" value="q3a3"/>Q3A3 text</li>
<li><input type="radio" name="q1" value="q3a4"/>Q3A4 text</li>
</ul>
<a href="" onclick="divswitcher('q3','final');" />Next</a>
</form>
</div>
<div id="final" style="display: none">
Yay!
</div>
</body>
</html>
Якорь с пустой href перезагружает страницу, попробуйте:
<a href="#" onclick="divswitcher('q3','final');">Next</a>
или return false
или preventDefault
в обработчик
Одна ошибка заключается в том, что вы дважды закрываете свои теги и ссылаетесь на пустой href= "":
<a href="" onclick="divswitcher('q1','q2');" />Next</a>
изменить на
<a onclick="divswitcher('q1','q2');">Next</a>
Это должно исправить это. Если вам нужен хороший указатель, когда вы наводите курсор на тег, добавьте этот стиль:
a{
cursor:pointer;
}
Это связано с тегом привязки: когда мы нажимаем на NEXt - перезагрузка страницы и, следовательно, мы возвращаемся к Q1
Я предлагаю вам использовать кнопку вместо тега привязки
ЗАМЕНА
<a href="" onclick="divswitcher('q1','q2');" />Next</a>
С
<button type="button" onclick="divswitcher('q1','q2');">NEXT</button>
Замените тэг (обратите внимание на typo />
, вы должны использовать только /
char для закрытия ссылки):
<a href="" onclick="divswitcher('q3','final');" />Next</a>
от
<a href="#" onclick="divswitcher('q3','final');">Next</a>