jquery - 使用 jQuery-twitter bootsrap 按钮向锚标记添加/删除类？

Question

我有一个单页网站。我的导航由引导程序 3 样式的几个按钮组成。

由于它是单页，因此按钮是锚标记。我希望能够将一个.active类应用于已单击的最后一个锚标记。

这是我的 HTML：

<a href="#home">
    <button type="button" class="btn btn-default btn-lg active">
    <span class="glyphicon glyphicon-home"></span> Home
    </button>
</a>

<a href="#about">
    <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> About
    </button>
</a>

还有我的 CSS：

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
border:none;
background-color: #2C3E50;
border-bottom: 1px solid #2C3E50;
}

Answer 1

试试这个...

$(function() {
    $("a").on("click", function() {
        $(".btn-default.active").removeClass("active");
        $(this).find(".btn-default").addClass("active");
    });
});

或者...

$(function() {
    $("a").on("click", function() {
        $("a.active").removeClass("active");
        $(this).addClass("active");
    });
});

不确定是否应该将活动类添加到链接或封闭的按钮中，所以每个都有 1。

Answer 2

你可以使用jQuery addClass

$('a#buttonid').click(function(){
    $(this).addClass('active');
});

您将检查以确保它还没有该类，并从其他按钮中删除活动类。