2

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

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

4

3 回答 3

26

将 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>
于 2013-07-19T02:55:00.087 回答
0

您可以使用以下 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');
});
于 2013-07-18T07:32:41.007 回答
0

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

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

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

于 2013-07-18T07:39:32.817 回答