Question

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

Answer 1

更改你的＆＃34; onclick＆＃34;属性：

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

并添加

 return false;

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

（正如我在评论中所指出的那样，你还想使用＆＃34;阻止＆＃34;而不是＆＃34;显示＆＃34;使部分可见。）

Answer 2

添加return 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>

循环后代码恢复

2 个答案: