gpt4 book ai didi

javascript - CSS 样式的 anchor 标记按钮无法正常工作(偶尔会失败)

转载 作者:太空宇宙 更新时间:2023-11-03 23:51:55 25 4
gpt4 key购买 nike

我有以下代码。

我复制了 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>

当我单击增加 按钮 时,它有时有效,有时无效。

似乎有几个地方点击按钮不起作用。

为什么会这样?有什么办法可以解决这个问题吗?

我正在使用 ChromeFirefox

最佳答案

您似乎缺少一些 HTML 标记。此页面上只有一个按钮,它的唯一功能是重置某些内容。

现在,因为您使用 anchor 链接作为按钮,默认行为是将您重定向到 anchor 的 href 属性。

因此,如上所述,删除 href="#" 属性,您的代码应该可以正常工作。

如果你想实现像 jQuery 这样的库,你会被介绍给自动忽略默认事件的事件方法(如提交和 hrefs),只需使用一行脚本,如:

e.preventDefault();

这是我在 jsFiddle 中的代码版本

关于javascript - CSS 样式的 anchor 标记按钮无法正常工作(偶尔会失败),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19749057/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com