Question

我写了一个在Chrome中完美运行的网页，但在Firefox中没有。它应该在按钮上显示图标，可点击并将内容粘贴到div上。

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

HTML：

<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>

JavaScript的：

$（＆＃34;＃搜索＆＃34）。单击（函数（）{

$("#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");

}

}）;

$（＆＃34;＃家＆＃34）。单击（函数（）{

$("#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");

}

}）;

$（＆＃34;＃接触＆＃34）。单击（函数（）{

$("#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");

}

}）;

$（＆＃34;＃地球＆＃34）。单击（函数（）{

$("#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");

}

}）; 内部html应该使用id divMainText转到div，它在chrome中运行得非常好，但在firefox中根本不行。这些按钮无法点击。

我是html，css和javascript的新手，并且不知道我是在做一些完全错误的事情。如果这可以解决这类问题，我非常愿意研究php（从未做过）。

可以找到该网站here

如果向下滚动到垂直标签，那就是相关部分。

Answer 1

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

您正在使用jQuery库。所以，你为什么要用纯净的你的代码中有javascript吗？
在controller.setMainApp(this);代码中，html代码中包含<button>标记具有<i>个id标记。 <button>属性指定HTML元素的唯一ID。因此，该值在HTML文档中必须是唯一的。
您在javascript代码中使用了id。但它的功能尚未定义。 HTML事件是HTML元素发生的事物。在HTML页面中使用JavaScript时，JavaScript可以对这些事件做出反应。
元素中没有event ID的元素。因此，divmain方法无法返回任何元素。
还有很多其他错误......

＆＃13;

getElementById()

＆＃13;

function setActive ( e ) {
    $('[id]').each(function(  ) {
        document.getElementById(this.id).className = "inactive"
    });

    var ident = e.target.id;

    document.getElementById( ident ).className += " activeIcon";

    switch( ident ) {
        case 'home':
            $( '#divMainText' ).html( '<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>' );
            break;
        case 'search':
            $( '#divMainText' ).html( '<br><h3>Search Section</h3><br><h5>No search function yet.</h5><br><h6 style="height: 50px">made by devdoweb.com</h6>' );
            break;
        case 'contact':
            $( '#divMainText' ).html( '<br><h3>Contact</h3><br><h5><a href="mailto:hoffmannma84@googlemail.com">Send me an email</a></h5><br><h6 style="height: 50px">made by devdoweb.com</h6>' );
            break;
        case 'globe':
            $( '#divMainText' ).html( '<br><h3>Weblinks</h3><br><h5><a href="https://www.w3schools.com/" target="_blank">Webdesign tutorials</a></h5><br><h6 style="height: 50px">made by devdoweb.com</h6>' );
            break;
    }

    document.getElementById('divMainText').className = "textMain";
}

＆＃13;

.icon-bar {
    width: 870px;
    height: 80px;
    margin: 0 auto;
    padding-top: 50px;
    background: #a1abba url("http://www.devdoweb.com/lake01.jpeg") 50% 0 no-repeat
}
.icon-bar button {
    float: left;
    width: 11%;
    text-align: center;
    padding: 15px 0;
    transition: all 0.3s ease;
    color: black;
    font-size: 36px;
    border-radius: 15px;
    background-color: rgba(88, 132, 82, 0.5);
    outline: none
}
.icon-bar button:hover {
        background-color: #1f9b71
}
.activeIcon {
    background-color: rgba(88, 132, 82, 1);
    transform: translateY(4px)
}
.textMain {
    text-align: center;
    width: 870px;
    margin: auto;
    font:  normail 25px Raleway;
    background-color: #609b58
}
.inactive {
    background-color: #609b58
}

＆＃13;

javascript无法在firefox中运行 - 图标栏无法点击

1 个答案: