首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用jquery在引导程序中激活导航栏

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

Stack Overflow用户
提问于 2013-07-18 15:18:26
回答 3查看 22.5K关注 0票数 2

当我点击导航栏时,我想激活它,

下面是我使用的jquery

代码语言:javascript
复制
$(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,我不能转到我想要的链接。它只是激活导航栏,而不是转到我选择的链接。

下面是链接代码:

代码语言:javascript
复制
<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(),导航栏将不会激活,但如果我使用它,我无法转到我想要的链接。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-07-19 10:55:00

将jQuery脚本更改为:

代码语言:javascript
复制
<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> 
票数 26
EN

Stack Overflow用户

发布于 2013-07-18 15:32:41

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

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

代码语言:javascript
复制
$(document).ready(function () {
    var active_link = $('.navbar li a[href~="<?= uri_string() ?>"]');
    if(active_link.size() > 0) active_link.parent().parent().addClass('active');
});
票数 0
EN

Stack Overflow用户

发布于 2013-07-18 15:39:33

对于您的问题,我得到的是您想要将active类设置为li,然后重定向到其他页面。如果我没理解错的话,那么,

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

因此,正确的方法是只在目标页面上放置active类逻辑,即首先导航到目标页面,在那里您可以将active类设置为li

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17717025

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档