使用CSS显示功能使用JavaScript创建选项卡

时间:2015-11-24 15:58:58

标签: javascript tabs

我无法弄清楚我的javascript出了什么问题。我的任务是使用JS和CSS显示功能创建制表符作为作业的一部分。

在我所做的所有研究中,已经建议使用未排序的列表来创建菜单,所以我已经完成了这个并创建了一个onclick事件来触发一个可能显示该选项卡内容的函数。但它并没有 - 它在浏览器中显示的是四个子弹和相应的文本。这个我可以点击,但功能好像坏了?

HTML:

<body>
    <ul id="tabs">
      <li><a id="tab1" href="/" tabindex="1" onclick="visPanel(1);return false;">Overview</a></li>
      <li><a id="tab2" href="/" tabindex="2" onclick="visPanel(2);return false;">Occupations</a></li>
      <li><a id="tab3" href="/" tabindex="3" onclick="visPanel(3);return false;">Education</a></li>
      <li><a id="tab4" href="/" tabindex="4" onclick="visPanel(4);return false;">Epilogue</a></li>
    </ul>
    <div id="panel1" class="panel">
        <h2><u>Education:</u></h2>
        <p>
        None. Whatsoever.
        </p>
    </div>
    ...
</body>

JS

function resetDisplay(){
for (i=1;i<6;i++){
    document.getElementById('panel' + i).style.display="none";
    }
}

function init(){
resetDisplay();
document.getElementById('panel1').style.display="block";
}

function visPanel(nr) {
resetDisplay();
panel=document.getElementById('panel'+nr).style;
panel.display="block";
}

onload=init;

因为我非常喜欢任何指向我所做错事的人都会非常感激!

0 个答案:

没有答案