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幻灯片描述here

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

显示导航项目的内容div

2 个答案: