如何使用jQuery在引导程序中激活导航栏 [英] How to Active nav bar in bootstrap with jquery

问题描述

当我单击导航栏时，我想使其处于活动状态，

I want make the navbar active when i click it,,

这是我使用的jQuery

Here is the jquery i use

$(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，我无法转到所需的链接.它只是使导航栏处于活动状态，但没有转到我选择的链接.

But because the preventDefault i can't go to the link that i want. It just make the navbar active, but it's not go to the link that i choose.

这是链接代码:

<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()，则导航栏将不会激活，但是如果使用，则无法进入我想要的链接.

if i dont use preventDefault() the navbar won't active, but if i use it i can't go to the link i want..

推荐答案

将jQuery脚本更改为此:

Change the jQuery script to this:

<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> 

这篇关于如何使用jQuery在引导程序中激活导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！