javascript - 显示内容 div onclick 的导航项

Question

问题：初级代码：纯Javascript

我创建了一个网页，我在其中通过 javascript 中的 for 循环呈现主要导航项目。在主导航下方，我创建了一些内容，为每个主要内容 div 分配了不同的 id。

现在我想点击任何导航项目，应该显示相应的内容 div。请找到 jsfiddle 链接：http: //jsfiddle.net/shabirgilkar/GKLJz/1/

我可以知道如何在纯javascript中做到这一点。任何帮助将不胜感激。

Answer 1

如果导航框中的文本与 div.contents 的 id 匹配，则此代码应该可以工作。希望我有所帮助。

old="home";
        function init() {
            document.getElementById('about').style.display = 'none';
            document.getElementById('products').style.display = 'none';
            document.getElementById('services').style.display = 'none';
            document.getElementById('career').style.display = 'none';
            document.getElementById('faq').style.display = 'none';
            document.getElementById('contact').style.display = 'none';
        var pages = document.querySelectorAll('a.box');
        for(i=0;i<pages.length;i++){
          pages[i].onclick=function(e){
              document.getElementById(old).style.display='none';
              old=e.target.innerHTML.toLowerCase();
              document.getElementById(old).style.display='inline-block';
              }
        }
            }

Answer 2

好的，我更新了你的小提琴：http: //jsfiddle.net/GKLJz/3/

诀窍是您将 id 分配给数组中的菜单项，然后调用onClick根据您单击的内容切换 css 类的函数...

如果你想让它漂亮，使用一些 js 动画效果而不是改变类，就像这里描述的 jQuery slide

顺便说一句，您可以完全省略 init() 函数，只需将其分配.hidden给其他 div 作为默认值