JS Basic Hide / Show Div не удается

0

Извините за то, что я задал этот вопрос, но я поражен. Я намеревался этот код перечислить вопросы до окончания теста. Вместо этого, сразу после переключения 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>
  • 0
    1 / замените привязку <a> тегом кнопки 2 / перезагрузка страницы из-за тега привязки и, следовательно, вы вернулись к Q1
Теги:

4 ответа

0
Лучший ответ

Якорь с пустой href перезагружает страницу, попробуйте:

<a href="#" onclick="divswitcher('q3','final');">Next</a>

FIDDLE

или return false или preventDefault в обработчик

  • 0
    Большое спасибо. Это помогает. И я тупой = (
0

Одна ошибка заключается в том, что вы дважды закрываете свои теги и ссылаетесь на пустой href= "":

<a href="" onclick="divswitcher('q1','q2');" />Next</a>

изменить на

<a onclick="divswitcher('q1','q2');">Next</a>

Это должно исправить это. Если вам нужен хороший указатель, когда вы наводите курсор на тег, добавьте этот стиль:

a{
    cursor:pointer;
}
0

Это связано с тегом привязки: когда мы нажимаем на NEXt - перезагрузка страницы и, следовательно, мы возвращаемся к Q1

Я предлагаю вам использовать кнопку вместо тега привязки

ЗАМЕНА

<a href="" onclick="divswitcher('q1','q2');" />Next</a>

С

<button type="button" onclick="divswitcher('q1','q2');">NEXT</button>
0

Замените тэг (обратите внимание на typo />, вы должны использовать только / char для закрытия ссылки):

<a href="" onclick="divswitcher('q3','final');" />Next</a>

от

<a href="#" onclick="divswitcher('q3','final');">Next</a>
  • 0
    Спасибо) Это помогло. Я действительно должен быть более внимательным, хотя (

Ещё вопросы

Сообщество Overcoder
Наверх
Меню