Question

我有一个简单的清单如下：

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

我遇到了不同的问题，但没有找到任何相关的答案。如果您需要更多信息，请与我们联系。

谢谢！

Answer 1

如果您不想要链接，请不要使用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>

Answer 2

参考：jsFiddle

您会注意到我只对您的代码进行了两次更改。

第一个更改是包含悬停div的背景颜色。

第二个变化是在白色背景上显示字体字，因为字体本身是白色的。

要查看两个点击事件是否有效，请将鼠标悬停在右上角的黑色矩形上，您将看到两个将弹出的链接，并允许在点击时调用警报。

底线是 没有错误 与您的代码，只是你需要将鼠标悬停在访问可点击的链接。

免责声明：仅供参考，不包括其他内容，例如首选锚链接方法。 ; - ）

Answer 3

你可能想尝试这样的事情：

    <a href="javascript: alert('clicked!!')">Default Categories</a>

在<a> not working IE and FF</a>上应用简单的onclick

3 个答案: