使用jQuery-twitter靴带按钮添加/删除类到锚标签？ [英] Adding/removing class to anchor tag with jQuery- twitter bootsrap buttons?

问题描述

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

I have a single page site. My navigation consists of a few buttons styled by bootstrap 3.

由于它是一个页面，所以按钮就是锚定标记。我希望能够将 .active 类应用于最后一次点击的锚标记。

Since it is a single page, the buttons are anchor tags. I want to be able to have an .active class applied to the last anchor tag that has been clicked.

这是我的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：

And my 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;
}

推荐答案

试试这个...

$(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每个。

Not sure if the active class should be added to the link or the enclosed button, so there's 1 for each.

这篇关于使用jQuery-twitter靴带按钮添加/删除类到锚标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！