循环之后的代码恢复

我在遇到以下代码时遇到了问题。当我点击一个链接时，我应该只能看到相应的部分。通过添加警报，我发现脚本隐藏了正确的元素，但循环运行后，一切都恢复正常。另外，如果我将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 2013-02-14 23:02:57

谢谢，虽然这不能解决我的问题。 – Steel 2013-02-14 23:04:34

改变你的 “点击” 属性：

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

，并添加

return false;

到函数结束。通过这样做，您可以防止发生标记的默认行为。

（你还需要使用“块”，而不是“显示”，以使部分可见的，因为我在注释中提到。）

来源

2013-02-14 23:05:38 Pointy

添加返回false，也给一个适当的HREF。发生了什么事是因为超链接默认操作每次都重新加载页面。另外注意，这将只作为第一次工作，第二次其他部分将不可用于id comparisson。

<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 2013-02-14 23:30:56

循环之后的代码恢复

回答

相关问题