javascript在firefox中不工作-图标栏不可点击

我已经写了一个网页，它在Chrome上运行得很好，但在firefox上却不行。它应该在按钮上显示图标，可以单击并将内容粘贴到div上

以下是不起作用的特定部分：

HTML:

垂直图标

这只是一个占位符容器，用于显示如何使用垂直选项卡。

由devdoweb.com制作

JavaScript:

$（“#搜索”）。单击（函数（）{

$（“#iconBarHome”）.html（“
搜索\n\

这只是一些占位符容器，\n\
显示垂直选项卡的功能。\n\

由devdoweb.com制作）；
var id=[“主页”、“搜索”、“联系人”、“全球”]；
对于（变量i=0；i<4；i++）{
document.getElementById（id[i]）.className=“非活动”；
$（“#搜索”）.addClass（“activeIcon”）；
} 

}))

$（“#主页”）。单击（函数（）{

$（“#iconBarHome”）.html（“
垂直图标\n\

这只是一些占位符容器，\n\
显示垂直选项卡的功能。\n\

由devdoweb.com制作）；
var id=[“主页”、“搜索”、“联系人”、“全球”]；
对于（变量i=0；i<4；i++）{
document.getElementById（id[i]）.className=“非活动”；
$（“#home”）.addClass（“activeIcon”）；
} 

}))

$（“#联系人”）。单击（函数（）{

$（“#iconBarHome”）.html（“
联系人\n\

\n\

由devdoweb.com制作）；
var id=[“主页”、“搜索”、“联系人”、“全球”]；
对于（变量i=0；i<4；i++）{
document.getElementById（id[i]）.className=“非活动”；
$（“#联系人”）.addClass（“activeIcon”）；
} 

}))

$（“#globe”）。单击（函数（）{

$（“#iconBarHome”）.html（“
Weblinks\n\

\n\

由devdoweb.com制作）；
var id=[“主页”、“搜索”、“联系人”、“全球”]；
对于（变量i=0；i<4；i++）{
document.getElementById（id[i]）.className=“非活动”；
$（“#globe”）.addClass（“activeIcon”）；
} 

}))； 内部html应该使用id divMainText进入div，这在chrome中非常好用，但在firefox中一点也不好用。按钮就是不可点击

我对html、css和javascript非常陌生，不知道我是否做了一些完全错误的事情。如果这可以解决此类问题，我非常愿意研究php（从未研究过）

可以找到该网站

---

如果向下滚动到垂直选项卡，这就是问题所在的部分。

您的javascript代码非常混乱。请注意以下几点：

您正在使用jQuery库。那么，你为什么要用纯水呢 代码中的javascript

在

html

代码中，

标记内有一个

标记 具有与

标记类似的

id

。

id

属性指定HTML元素的唯一id，因此，该值在HTML文档中必须是唯一的

您已经在javascript代码中使用了

事件

。但它的功能是不明确的。HTML事件是发生在HTML元素上的事件。在HTML页面中使用JavaScript时，JavaScript可以对这些事件做出反应

元素中没有ID为

divmain

ID的元素。因此，

getElementById（）

方法不能返回任何元素

还有很多其他的错误

功能设置激活（e）{
$（'[id]'）。每个（函数（）{
document.getElementById（this.id）.className=“非活动”
});
var ident=e.target.id；
document.getElementById（ident）.className+=“activeIcon”；
开关（识别）{
“家”案例：
$（“#divMainText'）.html（“
垂直图标
这只是一些占位符容器，用于显示如何使用垂直选项卡。
由devdowb.com制作”）；
打破
“搜索”案例：
$（“#divMainText'）.html（“
搜索部分
还没有搜索功能。
由devdoweb.com制作”）；
打破
“联系人”案例：
$（“#divMainText'）.html（“
联系人

由devdoweb.com制作”）；
打破
“地球”一案：
$（'#divMainText'）.html（'
由devdoweb.com制作的web链接

）；
打破
}
document.getElementById（'divMainText'）。className=“textMain”；
}

。图标栏{
宽度：870px；
高度：80px；
保证金：0自动；
填充顶部：50px；
背景：#一个ABBA url（“http://www.devdoweb.com/lake01.jpeg）50%0无重复
}
.图标栏按钮{
浮动：左；
宽度：11%；
文本对齐：居中；
填充：15px0；
过渡：所有0.3秒缓解；
颜色：黑色；
字体大小：36px；
边界半径：15px；
背景色：rgba（88,132,82,0.5）；
大纲：无
}
.图标栏按钮：悬停{
背景色：#1f9b71
}
.activeIcon{
背景色：rgba（88132,82,1）；
变换：translateY（4px）
}
.textMain{
文本对齐：居中；
宽度：870px；
保证金：自动；
字体：normail 25px-ralway；
背景色：#609b58
}
.不活跃{
背景色：#609b58
}

垂直图标


这只是一个占位符容器，用于显示如何使用垂直选项卡。


由devdoweb.com制作

是关键。首先，更正控制台中显示的错误。Firefox显示错误

无法在这里
document.getElementById（'divmain'）.className=“mainDiv”设置null属性“className”
可能没有id为
的元素
divmain
。我像在编辑中一样重写了整个部分，牢记了您所说的一些事情，但它仍然只在google chrome中起作用。检查google chrome中的代码片段。我又重写了一遍。它现在可以在两种浏览器中工作
<div class="icon-bar" id="iD-icon-bar">
        <button id="home" class="activeIcon" style="margin-left: 25%"><i id="homeIcon" class="fa fa-home" style="color: green;"></i></button> 
        <button id="search" ><i id="searchIcon" class="fa fa-search" style="color: green;"></i></button> 
        <button id="contact" ><i id="contactIcon" class="fa fa-envelope" style="color: green;"></i></button> 
        <button id="globe" ><i id="globeIcon" class="fa fa-globe" style="color: green;"></i></button>
      <div id="iconBar">
        <div id="iconBarHome" style='font-family:  Raleway; text-align: center; font-size: 25px; margin: auto; width: 870px; background-color: #609b58'>
            <br><h3>Vertical Icons</h3>
            <br><h5>This is just some placeholder container, to show what you can do with vertical tabs.</h5>
            <br><h6 style='height: 50px;'>made by devdoweb.com</h6>
        </div>

    </div>

$("#iconBarHome").html("<br><h3>Search</h3>\n\
<br><h5>This is just some placeholder container,\n\
to show what you can do with vertical tabs.</h5>\n\
<br><h6 style='height: 50px;'>made by devdoweb.com</h6>"); 


var ids = ["home", "search","contact", "globe"];
for (var i = 0; i < 4; i++)   {
document.getElementById(ids[i]).className = "inactive";
$("#search").addClass("activeIcon");

} 

$("#iconBarHome").html("<br><h3>Vertical Icons</h3>\n\
<br><h5>This is just some placeholder container,\n\
to show what you can do with vertical tabs.</h5>\n\
<br><h6 style='height: 50px;'>made by devdoweb.com</h6>"); 


var ids = ["home", "search","contact", "globe"];
for (var i = 0; i < 4; i++)   {
document.getElementById(ids[i]).className = "inactive";
$("#home").addClass("activeIcon");

} 

$("#iconBarHome").html("<br><h3>Contact</h3>\n\
<br><h5><a href='mailto:hoffmannma84@googlemail.com'>send me an email</a></h5>\n\
<br><h6 style='height: 50px;'>made by devdoweb.com</h6>"); 


var ids = ["home", "search","contact", "globe"];
for (var i = 0; i < 4; i++)   {
document.getElementById(ids[i]).className = "inactive";
$("#contact").addClass("activeIcon");

} 

$("#iconBarHome").html("<br><h3>Weblinks</h3>\n\
<br><h5><a href='https://www.w3schools.com/' target='_blank'>Webdesign tutorials</a></h5>\n\
<br><h6 style='height: 50px;'>made by devdoweb.com</h6>"); 


var ids = ["home", "search","contact", "globe"];
for (var i = 0; i < 4; i++)   {
document.getElementById(ids[i]).className = "inactive";
$("#globe").addClass("activeIcon");

}