在<a>IE和FF不工作

simple onclick applied on <a> not working IE and FF

本文关键字：FF 工作 gt lt IE      更新时间：2023-09-26

我有一个简单的列表如下：

<div class="settingButton"><a href="#"></a>
     <div class="subManu">
           <ul>
               <li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
               <li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
      </div>
</div>

我没有看到点击链接时的警报！它在Chrome中运行良好，但在IE和FF中运行不好。我使用了相同的结构，但没有分配类，它按预期运行。也许问题出在CSS上，但我不确定是什么。这是下拉菜单的CSS，

.settingButton { 
   background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
   width:25px; 
   height:37px; 
   float:left; 
   position:absolute;
   right:13px;
   top:-30px;
}
.settingButton a {
   display:block;
   width:25px;
   height:37px;
}
.settingButton:hover {
   background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
   background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
   display:none;
   height:100px;
}
.settingButton:hover div.subManu {
   background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;    
   position:absolute;
   top:20px;
   z-index:99;
   right:0;
   width:250px;
   height:50px;
   display:block;
   padding:13px 0 0 0;
}
div.subManu ul {
   display:block;
   background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
   border-left:#547b9a 1px solid;
   border-right:#547b9a 1px solid;
   height:29px;
   padding:0 0 0 7px;
}
div.subManu ul li {
   width:110px;
   float:left;
   margin:0 5px;
   display:block;
   height:29px;
}
div.subManu ul li a {
   display:inline;
   color:#ffffff;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:normal;
   line-height:28px;
}
div.subManu ul li a:hover {
   color:#b7f630;
}
div.subManu ul li.active-manu a {
   color:#b7f630;
}

我经历了不同的问题，但没有找到任何相关的答案。如果你需要更多信息，请告诉我。

谢谢！

如果你不想要链接，不要使用a元素，而是使用按钮或样式跨度，例如

<style type="text/css">
  .clickable:hover {
    text-decoration: underline;
    cursor: pointer;
  }
 </style>
 ...
 <span class="clickable">thing to click</span>

无论如何，链接的首选方法是：

<a href="http://link for script-disabled browsers" 
   onclick="myFunction(); return false;">...</a>

参考：jsFiddle

你会注意到我只对你的代码做了两次更改。

第一个变化是包括悬停分区的背景颜色。

第二个变化是使字体文字在白色背景上可见，因为字体本身就是白色的。

要查看两个单击事件的工作情况，请将鼠标悬停在右上角的黑色矩形上，您将看到两个链接，这两个链接将弹出，并允许在单击时调用警报。

底线是您的代码没有任何问题，只需要悬停即可访问可点击的链接。

免责声明：仅供提问，不包括其他内容，如锚链接的首选方法。；-）

您可能需要尝试以下操作：

    <a href="javascript: alert('clicked!!')">Default Categories</a>
相关文章：