引导活动按钮状态持续存在答案

【问题标题】：Bootstrap Active Button State Persists引导活动按钮状态持续存在
【发布时间】：2014-03-31 00:19:25
【问题描述】：

我使用引导垂直按钮组作为复选框样式的 UI 来控制 this mapbox.js-based interactive map 上的图层。图层控制功能效果很好，但出于某种原因，按钮：

在正常状态下加载（应该如此）
点击后进入活动状态（应该如此）
下次点击时保持活动状态颜色（悲伤的表情）

看起来像这样：

我的怀疑是我的 onclick 函数干扰了引导按钮组的本机行为，但我终生无法弄清楚如何。这是我目前拥有的那个功能，管理按钮类更新和地图层更新：

link.onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (map.hasLayer(layer)) {
        map.removeLayer(layer);
        this.className = 'btn btn-primary';
    } else {
        map.addLayer(layer);
        this.className = 'active btn btn-primary';
    }
};

鉴于此，我怎样才能让我的按钮正确取消选择？

【问题讨论】：

标签： javascript css twitter-bootstrap leaflet mapbox

【解决方案1】：

这应该可以解决它，只需将 stop() 函数添加到 else 语句，以便它从上一个按钮中删除 active 类并将其添加到单击的按钮中。

 if (map.hasLayer(layer)) {
        map.removeLayer(layer);
        this.className = 'btn btn-primary';
    } else {
        map.addLayer(layer);
        this.stop().className = 'active btn btn-primary';
    }

【讨论】：

我实际上设法通过列出的解决方案获得了它，但是很高兴了解stop() 函数；它会派上用场的。谢谢！

【解决方案2】：

虽然我不知道为什么会这样，但我已经通过一个非常简单的更改解决了这个问题：

我没有使用<button> 元素构建按钮，而是将它们切换为<a> 元素。现在完美运行。如果有人能解释原因，我很乐意听到。

【讨论】：