如何使用 jquery 在引导程序中激活导航栏答案

【问题标题】：How to Active nav bar in bootstrap with jquery如何使用 jquery 在引导程序中激活导航栏
【发布时间】：2013-07-18 07:18:25
【问题描述】：

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

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

【问题讨论】：

标签： jquery html twitter-bootstrap navbar

【解决方案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>

【讨论】：

【解决方案2】：

您的问题是，我得到的是您想将active 类设置为li，然后重定向到其他页面。如果我理解正确，那么，

您似乎以错误的方式接近它。您正在尝试首先将 active 类设置为 li，然后重定向到不同的页面。这无论如何都不起作用，因为重定向后active 类将不会自动维护。

因此，正确的方法是仅将active 类逻辑放在目标页面上，即首先导航到目标页面，然后您可以将active 类设置为li。

【讨论】：

ehmm sorry 可以举个例子吗？.. 我还是 jquery 的新手
为什么不能在 trget 页面上用active 类硬编码li？您是否使用 comman html 标签在每个页面上生成菜单？
我在目标页面上使用它仍然无法正常工作.. 当我点击它时更改链接而不激活导航栏.. -_-
我的意思是不要使用 jquery 来设置active 类。只需为目标页面上的特定li 写<li class="active">...</li>。

【解决方案3】：

您可以使用以下 javascript 根据当前 url 添加活动类

我假设您正在使用 codeigniter，所以 uri_string() 函数可用

$(document).ready(function () {
    var active_link = $('.navbar li a[href~="<?= uri_string() ?>"]');
    if(active_link.size() > 0) active_link.parent().parent().addClass('active');
});

【讨论】：