Возврат кода после цикла

У меня возникли проблемы со следующим кодом. Когда я нажимаю ссылку, я должен видеть только соответствующий раздел. Добавляя в предупреждениях, я вижу, что скрипт скрывает правильные элементы, но после того, как цикл запущен, все возвращается к норме. Кроме того, если я изменяю события onClick на onMouseOver, скрытые элементы сохраняются скрытыми после завершения цикла.Возврат кода после цикла

<html> 

<head> 
<script> 

function switchTabs(clicked) 
{ 
    var tab = clicked.innerHTML; 
      var content = document.getElementsByTagName('section'); 

    for(var i=0; i<content.length; i++) 
    { 
     if(content[i].id && content[i].id.indexOf(tab) != -1) 
     { 
      content[i].style.display = 'inline'; 
     } 
     else 
     { 
      content[i].style.display = 'none'; 
     } 
    } 

} 

</script> 

</head> 

<body> 
<nav> 
    <ul> 
     <li><a href='' onClick='switchTabs(this);'>Javascript</a></li> 
     <li><a href='' onClick='switchTabs(this);'>Ajax</a></li> 
     <li><a href='' onClick='switchTabs(this);'>PHP</a></li> 
    </ul> 
</nav> 
<section id='JavascriptSection'> 
    <h1>Javascript Section</h1> 
</section> 

<section id='AjaxSection'> 
    <h1>AJAX Section</h1> 
</section> 

<section id='PHPSection'> 
    <h1>PHP Section</h1> 
</section> 
</body>

источник

2013-02-14 Steel

Я думаю, что вместо «отображения» вы хотите «блокировать», чтобы все было видно. – Pointy

спасибо, хотя это не исправляет мою проблему. – Steel

Измените ваш "OnClick" атрибуты:

<a href='' onClick='return switchTabs(this);'>Javascript</a>

и добавить

return false;

до конца функции. Делая это, вы предотвращаете поведение по умолчанию тега <a>.

(Вы также можете использовать «блок» вместо «дисплея», чтобы сделать разделы видны, как я отметил в комментарии.)

источник

2013-02-14 23:05:38 Pointy

Добавить вернуть ложь, а также дать надлежащую HREF. Случилось то, что страница перезагружалась каждый раз из-за действия по умолчанию гиперссылок. Также обратите внимание, что это будет работать только в первый раз, так как второй раз другие разделы не будут доступны для сравнения id.

<html> 

<head> 
<script> 

function switchTabs(clicked) 
{ 
    var tab = clicked.innerHTML; 
      var content = document.getElementsByTagName('section'); 

    for(var i=0; i<content.length; i++) 
    { 
     if(content[i].id && content[i].id.indexOf(tab) != -1) 
     { 
      content[i].style.display = 'display'; 
     } 
     else 
     { 
      content[i].style.display = 'none'; 
     } 
    } 
    return false; 
} 

</script> 

</head> 

<body> 
<nav> 
    <ul> 
     <li><a href='#' onClick='switchTabs(this);'>Javascript</a></li> 
     <li><a href='#' onClick='switchTabs(this);'>Ajax</a></li> 
     <li><a href='#' onClick='switchTabs(this);'>PHP</a></li> 
    </ul> 
</nav> 
<section id='JavascriptSection'> 
    <h1>Javascript Section</h1> 
</section> 

<section id='AjaxSection'> 
    <h1>AJAX Section</h1> 
</section> 

<section id='PHPSection'> 
    <h1>PHP Section</h1> 
</section> 
</body>

источник

2013-02-14 23:10:25 mojarras

Спасибо. Я не знал о поведении по умолчанию. – Steel

Возврат кода после цикла

ответ

Смежные вопросы