Hinzufügen/entfernen-Klasse anchor-tag mit jQuery - twitter-bootsrap-Tasten?

Ich habe eine single page Website. Meine navigation besteht aus ein paar buttons, gestylt von bootstrap 3.

Da es eine einzelne Seite, die Tasten sind Anker-tags. Ich möchte in der Lage sein, um eine .active Klasse angewendet, um den letzten Anker-tag geklickt wurde.

Dies ist mein 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>

Und mein 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;
}
InformationsquelleAutor Landon Dorrier | 2013-10-02
  1. 4

    Versuchen, diese...

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

    ... oder

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

    Nicht sicher, ob die aktive Klasse sollte Hinzugefügt werden, den link oder die beiliegende Taste, so gibt es 1 für jeden.

    • Danke! Der erste war der richtige. Viel Anerkennung.
    • Kein problem - gerne helfen 🙂
    InformationsquelleAutor Archer
  2. 0

    Könnten Sie jQuery addClass

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

    Würde Sie überprüfen, um sicherzustellen, dass es nicht schon Klasse, und entfernen Sie die active-Klasse von den anderen Schaltflächen auch.

    InformationsquelleAutor Darren
Schreibe einen Kommentar