0

我有以下代码。

我在这里复制了 CSS

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

当我单击增加button时，它有时有效，有时无效。

似乎很少有点击按钮不起作用的地方。

为什么会这样？有没有办法解决这个问题？

我正在使用Chrome和Firefox。

4

2 回答 2

2

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

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

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

如果您想实现类似的库，您将被介绍给仅使用一行脚本jQuery自动忽略默认事件（如 submits 和 s）的事件方法，例如：href

e.preventDefault();

这是我在jsFiddle中的代码版本

于 2013-11-03T02:04:45.183 回答
1

从nchor 标记中删除href属性，它应该可以正常工作。a

于 2013-11-03T01:57:58.020 回答