使用 bootstrap 按钮点击时去掉阴影闪动

功能需求
两个按钮：时间，空间
点击哪一个，就由原来的 btn-default 样式变为 btn-primary

一开始在 btn-group 中设置两个 btn 为 button 标签，
这样出现的不和谐元素是：
点击按钮后，虽然样式切换正常，但是点击之后，按钮上方会留下阴影，视觉上不是很友好，我们只想 btn 有颜色的变化就行了

<div id="register-head" class="btn-group" role="group">
    <button id="time_btn" class="btn btn-default" onclick="time_click()">时间</button>
    <button id="space_btn" class="btn btn-primary" onclick="space_click()">空间</button>
</div>

<script>
    function time_click() {
        document.getElementById("time_btn").className = "btn btn-primary";
        document.getElementById("space_btn").className = "btn btn-default";
    }

    function space_click() {
        document.getElementById("time_btn").className = "btn btn-default";
        document.getElementById("space_btn").className = "btn btn-primary";
    }
</script>

button

后来发现，只要把 button 标签改为 a 标签，问题就解决了。
这样鼠标离开之后，按钮上方的阴影就消失了，不需要再点击一下网页别的地方才会消失。

<div id="register-head" class="btn-group" role="group">
    <a id="time_btn" class="btn btn-default" onclick="time_click()">时间</a>
    <a id="space_btn" class="btn btn-primary" onclick="space_click()">空间</a>
</div>

<script>
    function time_click() {
        document.getElementById("time_btn").className = "btn btn-primary";
        document.getElementById("space_btn").className = "btn btn-default";
    }

    function space_click() {
        document.getElementById("time_btn").className = "btn btn-default";
        document.getElementById("space_btn").className = "btn btn-primary";
    }
</script>