我有以下代码。
我复制了 CSS here
<html>
<head>
<title>anchor button not working</title>
<style>
.a_demo_two {
display: inline-block;
width: 50px;
margin: 10px;
background-color:#6fba26;
padding:10px;
position:relative;
font-family: 'ChunkFiveRegular';
text-align: center;
font-size:12px;
text-decoration:none;
color:#fff;
background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
border-radius: 5px;
}
.a_demo_two:active {
top:7px;
background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
color: #156785;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
background: rgb(44,160,202);
}
.a_demo_two::before {
background-color:#072239;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding-left:2px;
padding-right:2px;
padding-bottom:4px;
left:-2px;
top:5px;
z-index:-1;
border-radius: 6px;
box-shadow: 0px 1px 0px #fff;
}
.a_demo_two:active::before {
top:-2px;
}
</style>
</head>
<body>
<div id="controls_container">
<a href="#" class="a_demo_two" onclick="reset_function()"></a>
</div>
<div id='test'></div>
<script>
var bet = 0;
function reset_function() {
bet++;
document.getElementById('test').innerHTML= bet;
}
</script>
</body>
</html>
当我单击增加 按钮 时，它有时有效，有时无效。
似乎有几个地方点击按钮不起作用。
为什么会这样？有什么办法可以解决这个问题吗？
我正在使用 Chrome 和 Firefox。
最佳答案
您似乎缺少一些 HTML 标记。此页面上只有一个按钮，它的唯一功能是重置某些内容。
现在，因为您使用 anchor 链接作为按钮，默认行为是将您重定向到 anchor 的 href 属性。
因此，如上所述，删除 href="#" 属性，您的代码应该可以正常工作。
如果你想实现像 jQuery 这样的库，你会被介绍给自动忽略默认事件的事件方法(如提交和 hrefs)，只需使用一行脚本，如:
e.preventDefault();
这是我在 jsFiddle 中的代码版本
关于javascript - CSS 样式的 anchor 标记按钮无法正常工作(偶尔会失败)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19749057/