0

リンクをクリックしたときに、(ブートストラップを使用して) ナビゲーション バーの Active クラスを変更したいと考えています。

これは私のhtmlです：

            <div class="navbar navbar-fixed-top navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="#">Phonebook</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#about">About Us</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

このサイトの回答から得た次の jQuery コードを試しましたが、うまくいきません。

これはコードです：

        $(document).ready(function () {
        $('.nav li a').click(function (e) {
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
            debugger;
            e.preventDefault();
        });
    });
4

1 に答える 1

1

あなたはそれを複雑にしています：

$(document).ready(function () {
    $('.nav li').on('click', function (e) {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

フィドル

また、アンカーにハッシュ リンクを追加してから、イベント ハンドラで preventDefault を使用するのはなぜですか?

于 2013-07-20T22:07:53.797 に答える