Я написал веб-страницу, которая отлично работает в 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:
$ ("# search"). Click (function () {
$("#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");
}
});
$ ("# home"). click (function () {
$("#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");
}
});
$ ("# contact"). Click (function () {
$("#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");
}
});
$ ("# globe"). Click (function () {
$("#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 должен идти в div с идентификатором divMainText, который очень хорошо работает в chrome, но совсем не работает в firefox.Кнопки просто не кликабельны.
Я довольно новичок в html, css и javascript и не знаю, делаю ли я что-то совершенно не так или что-то в этом роде.Я очень хочу заглянуть в php (никогда не делал), если это может быть решением для таких проблем.
Веб-сайт можно найти здесь
Если выпрокрутите вниз до вертикальных вкладок, то есть соответствующего раздела.