Javascript 在导航元素上显示Div单击并隐藏其他Div

我用HTML构建了一个导航栏，还构建了一些div，其中填充了一组与每个nav元素相关的内容

我想做的是在单击时显示与所选导航元素相关的div，并隐藏与其他导航元素相关的其他div

基本上，当用户单击导航项目时，需要在html中将该导航项目的类设置为“navItem active on”。不确定这是否是自动发生的

之后，CSS中为该导航项目的内容面板定义的显示属性需要更改为“块”，所有其他内容面板的“显示”属性应更改为“无”，以便它们不会显示在页面中

在给出的示例中，我在CSS和HTML（功能和教程）中只定义了两个内容面板，但每个navItem都将收到自己的内容面板，单击时应将其打开

我真的不知道从哪里开始。我很确定这需要JavaScript，但这确实是我第一次尝试构建网页，即使是在从另一个网站复制了很多灵感之后，我也花了2天时间。非常感谢您的帮助、指导或见解

CSS+HTML：

var links=document.getElementsByClassName（“navItem”）；
对于（i=0；i

/*字体分配
--------------------------- */
/*一般用途*/
a{
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
P
小的{
字体系列：“Avenir LT W01 35 Light”，Arial，Helvetica，无衬线；
}
p、 大文本{
字体大小：18px！重要；
}
人力资源{
背景色：#E0；
颜色：#E0；
}
.中心内容{
文本对齐：居中！重要；
}
/*特殊用途*/
h1，
h2，
H1A，
h2a，
h3，
h3 a，
信息栏，
.gisFont1，
吉斯方特先生{
字体大小：正常！重要；
字体风格：普通；
线高：正常；
字体变体：正常；
字体系列：“Avenir LT W01 35 Light”，Arial，Helvetica，无衬线；
}
/*--结束字体分配--*/
/*信息栏-信息栏是顶部的导航元素
用于导航文档的子页面并更改内容
面板的内容取决于选定的信息栏导航元素
--------------------------- */
/*信息栏底部边框*/
#信息栏{
背景：#FFF；
/*边框顶部：1px实心#e5*/
边框底部：1px实心#e5；
最大宽度：940px；
文本对齐：居中；
/*显示：表格*/
保证金：0自动；
}
/*悬停或活动元素上的信息栏底部边框*/
#信息栏a：悬停，
#信息栏a.active{
边框底部：4px实心#2889DE；
文字装饰：无；
}
/*信息栏链接文本*/
#信息栏a{
背景：透明；
颜色：#000；
显示：内联块；
字体大小：16px；
字体系列：“Avenir LT W01 35 Light”，Arial，Helvetica，无衬线；
填充：1.4em；
文字装饰：无；
}
/*信息栏链接文本悬停*/
#信息栏a：悬停{
背景：透明；
颜色：#2889DE；
显示：内联块；
字体大小：16px；
字体系列：“Avenir LT W01 35 Light”，Arial，Helvetica，无衬线；
填充：1.4em；
文字装饰：无；
}
/*信息栏活动元素*/
#信息栏a.active{
字体系列：“Avenir LT W01 65中等”，Arial，Helvetica，无衬线；
}
/*媒体查询*/
@媒体屏幕和屏幕（最大宽度：960像素）{
#信息栏a{
字体大小：14px；
}
}
@媒体屏幕和屏幕（最大宽度：830像素）{
#信息栏a{
填充物：1em 0.6em；
}
}
@媒体屏幕和屏幕（最大宽度：760像素）{
#信息栏{
显示：无；
}
}
/*--结束信息栏--*/
/*页面部分
--------------------------- */
/*页面节样式*/
.第页{
背景位置：中上；
颜色：#4d；
最小高度：200px；
填充：60px0；
文本对齐：居中；
宽度：940px；
保证金：自动；
}
/*页面部分-标题2样式*/
.第h2页{
字体大小：24px；
边缘底部：20px；
}
/*页面节段落样式*/
.第页第p节{
颜色：#333；
字号：18px；
线高：1.5；
/*利润率：10px0.45px0*/
}
/*前言部分顶部样式*/
.引言部分顶部{
填充：0；
最小高度：160px；
}
/*前言部分顶部标题1样式*/
.引言部分顶部h1{
颜色：#222；
字体大小：36px；
}
/*前言部分顶部段落样式*/
.前言部分顶部p{
颜色：#4d；
边缘底部：10px；
}
.grid-100{
宽度：100%；
保证金：自动；
}
/*内容面板
----------------------------- */
/*能力小组*/
#能力小组{
最大宽度：980px；
保证金：0自动；
显示：块；
}
/*教程面板*/
#教程面板{
最大宽度：980px；
保证金：0自动；
显示：无；
}
.产品行{
边缘底部：50px；
/*宽度：100%*/
最大宽度：940px；
保证金：0自动；
显示：内联块；
}
.产品盒{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
盒影：0 1px4pRGBA（0,0,0,0.3）；
浮动：左；
溢出：隐藏；
利润率：0.5%；
位置：相对位置；
文本对齐：居中；
盒影：0 1px4pRGBA（0,0,0,0.3）；
宽度：24%；
}
@媒体屏幕和屏幕（最大宽度：960像素）{
.产品盒{
宽度：48%；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
.产品盒{
显示：块；
浮动：无；
利润率：10px自动；
宽度：95%；
}
}
.产品箱a{
颜色：#FFF；
显示：块；
字体大小：粗体；
}
.产品框a：悬停。内框填充{
位置
$(document).ready(function(){
    $(".navItem").click(function(event) {
        event.preventDefault();

        $('.navItem').removeClass("active").removeClass("on");
        $(this).addClass("active").addClass("on");
        var panel = $(this).attr('panel-id');

        $(".panel").hide();
        $("#"+panel).show();
    });
});

   (function () {
        alert('hello');
        var links = document.getElementsByClassName("navItem");
        for (i = 0; i < links.length; i++) {
            var link = links[i];
            link.addEventListener('click',function(event) {
                event.preventDefault();

                for(int k = 0; k < links; k++) {
                    links[k].className = "navItem";
                }
                event.target.className += " active on";


                var panels = document.getElementsByClassName("panel");
                for (j = 0; j < panels.length; j++) {
                    panels[j].style.display = 'none';
                }
                var panel_id = event.target.getAttribute("panel-id");
                document.getElementById(panel_id).style.display = 'block';
            });
        }
    })();