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マークアップの一部が欠落しているようです。このページにはボタンが 1 つしかなく、その唯一の機能は何かをリセットすることです。

アンカー リンクをボタンとして使用しているため、デフォルトの動作ではアンカーのhref属性にリダイレクトされます。

したがって、上記のようにhref="#"属性を削除すると、コードは正常に動作するはずです。

のようなライブラリを実装したい場合は、次のような 1 行のスクリプトを使用してjQuery、デフォルト イベント (submits や s など) を自動的に無視するイベント メソッドを紹介します。href

e.preventDefault();

jsFiddleのコードの私のバージョンは次のとおりです

于 2013-11-03T02:04:45.183 に答える
1

nchor タグhrefから属性を削除すると、正常に動作するはずです。a

于 2013-11-03T01:57:58.020 に答える