jquery - 如何使用 jquery 在 bootstrap 中激活导航栏

Question

我想让导航栏在我点击它时激活，，

这是我使用的jquery

$(document).ready(function () {
        $('.navbar li').click(function(e) {
            $('.navbar li').removeClass('active');
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
        e.preventDefault();
        });         
    });

但是因为 preventDefault 我不能转到我想要的链接。它只会激活导航栏，但不会转到我选择的链接。

这是链接代码:

<div class="nav-collapse collapse">
    <ul class="nav">
        <li><a href='<?php echo site_url(' tampilan ') ?>'>Knowledge Base</a>
        </li>
        <li><a href='<?php echo site_url(' ticketing/browse_ticketing ') ?>'>Ticketing</a>
        </li>
        <li><a href='<?php echo site_url(' user/logout ') ?>'>Logout</a>
        </li>
    </ul>
</div> 

如果我不使用 preventDefault()，导航栏将不会激活，但如果我使用它，我就无法转到我想要的链接..

Answer 1

将 jQuery 脚本更改为:

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
        $('ul.nav a').filter(function() {
             return this.href == url;
        }).parent().addClass('active');
    });
</script>