鍍金池/ 問答/HTML5  HTML/ 用JS寫的為實現(xiàn)點擊一下a標簽寫的按鈕，使之變換背景顏色，我的代碼只能是先點兩次

用JS寫的為實現(xiàn)點擊一下a標簽寫的按鈕，使之變換背景顏色，我的代碼只能是先點兩次才能變換背景顏色，求告知，謝謝！

我用以下代碼實現(xiàn)背景變換
【代碼】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0 auto;
            padding: 0;
        }
        div{
            height:210px;
            width: 100px;
        }
        div>a{
            text-decoration: none;
            color: black;
            width: 100px;
            height: 40px;
            background: green;
            float: left;
            margin-bottom: 10px;
        }
    </style>

</head>
<body>
    <div>
        <a href="" name="a1">123</a>
        <a href="" name="a1">123</a>
        <a href="" name="a1">123</a>
        <a href="" name="a1">123</a>
        <a href="" name="a1">123</a>
        <a href="" name="a1">123</a>
    </div>
</body>
    <script type="text/javascript">
        var a=document.getElementsByName("a1");
        for(var i = 0; i < a.length;i++){
            a[i].onclick = function(){
                this.style.background = "red";
            }
        }
    </script>
</html>

【問題】怎么點一下就能變色，而不是要點兩下才變色呢！
【圖】
圖片描述

【請大佬幫助！】

回答
編輯回答
神曲

你把<a href="" name="a1">123</a>這句話中的href=""去掉就可以了，a標簽中有了href=""，點擊a標簽的時候會強制刷新頁面，導致你自定義的click點擊因頁面刷新無效。

2018年3月21日 12:51
編輯回答
陌南塵

加一句event.preventDefault()阻止事件的默認行為就不會跳轉(zhuǎn)了。樓上答案把href都去掉了，那干嘛用a標簽，用div或者span啥的都ok。

2017年3月7日 11:41
編輯回答
刮刮樂

樓上都解答了，我提個建議吧，綁定事件的形式可以用事件委托。

2017年5月17日 14:46