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>

Answer 2

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

我假设您正在使用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');
});

Answer 3

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

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

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

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

3 个答案: