Firefox中JavaScript失效：图标按钮无法点击问题求助

看起来你的垂直标签按钮在Chrome里正常工作，但到了Firefox就完全没反应，我来帮你排查下核心问题和解决办法：

一、最可能的根源：事件绑定时机不对 #

Firefox对DOM加载的时机要求更严格，如果你的jQuery代码在页面DOM还没完全加载完成就执行了，$("#search")这类选择器可能找不到对应的按钮元素，自然绑定不上点击事件。Chrome可能有自动容错机制，但Firefox不会“网开一面”。

解决办法：把所有点击事件代码包裹在DOM就绪事件里 #

修改你的JavaScript代码，确保所有事件绑定都在DOM加载完成后执行：

$(document).ready(function() {
  // 搜索按钮点击事件
  $("#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按钮点击事件
  $("#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"); 
  });
});

二、检查是否有元素遮挡按钮 #

有时候按钮看起来在页面上层，但实际有透明的div或其他元素覆盖在按钮区域，导致点击事件被拦截。你可以用Firefox的开发者工具（按F12），点击“选择元素”工具后点击按钮，看看选中的是不是目标按钮。如果是其他元素，调整它的z-index属性或者尺寸，让按钮处于可点击的层级。

三、简化代码避免语法差异 #

你代码里的\n\换行转义在不同浏览器里解析可能有差异，推荐用ES6模板字符串简化HTML内容，可读性更高也不容易出错：
比如把$("#iconBarHome").html(...)改成：

$("#iconBarHome").html(`
  <br><h3>Search</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>
`);

关于PHP的疑问 #

PHP是服务器端语言，这个问题属于前端浏览器兼容性问题，PHP解决不了哦，不用考虑用PHP来修复这个问题。

先试试第一个方案（把代码放在$(document).ready()里），这是最常见的原因，大概率能解决你的问题。如果还是不行，再检查元素遮挡的情况。

内容的提问来源于stack exchange，提问作者griesgram