jQuery的.active添加到引导导航栏 [英] jquery adding .active to bootstrap navbar

问题描述

在基于浏览器url参数将 .active 类附加到Bootstrap导航栏元素时，我的现有jQuery存在一些问题.

I have some issues with my existing jQuery when it comes to appending .active class to the Bootstrap navbar element, based on the browser url parameters.

问题是index.php将为与index.php匹配的navbar元素生成活动类，但是，如果不存在index.php，则该元素将不会显示为活动类，传递查询时似乎会出现相同的问题.

The problem is that index.php will yield active class for the navbar element matching index.php however if no index.php is present the element will not be displayed as active, the same problem seems to occur when passing a query.

例如inbox.php将产生 .active 类，而inbox.php?view = sent将不产生任何结果.

For example inbox.php will yield .active class, while inbox.php?view=sent will yield nothing.

这是现有的jQuery，有人可以帮助我纠正index.php的这个小问题，并且/不显示 .active ，并且包含包含同一页面查询参数的链接也可以.

Here is the existing jQuery can someone help me out to correct this tiny issues with index.php and / not displaying .active and same with links that contain query parameters for the same page.

$(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');
});

.nav结构是默认的Bootstrap导航的结构，没什么花哨的.我试图使用PHP附加 .active 类，但是由于某种原因，它不想很好地发挥作用，我使用了StackOverflow上关于PHP的代码，并添加了 .active >元素.

The .nav structure is that of default Bootstrap navigation, nothing fancy. I have attempted to use PHP to append .active class but for some reason it did not want to play nicely and I used code that is found on StackOverflow regarding PHP and adding .active element.

谢谢.

推荐答案

假设您所有页面的路径都类似于.../myPage.ext?x=y，其中ext是任何给定的页面扩展名，即php, html, etc.，以下代码段将当前页面，通过在'?'处拆分window.location删除查询字符串(如果有的话)，并获取当前页面的名称，然后在nav-bar中搜索具有匹配的href的<a></a>.与您所做的非常相似.

Assuming that all your pages have a path similar to .../myPage.ext?x=y, where ext is any given page extension i.e. php, html, etc., the following snippet gets the current page, removes the query string if any by splitting the window.location at '?' and gets the name of the current page, then it searches the nav-bar for the <a></a> with the matching href. Very similar to what you are doing.

<script>
    $(document).ready(function () {
        // Let's get rid of the query string
        var path = location.pathname.split('?')[0];
        var start = path.lastIndexOf('/');
        var activeLink = path.substr(start);

        var parent = $('a[href*="' + activeLink + '"]').parent('li');
        // These two lines check if you have dropdowns in your nav-bar
        if (parent.closest('ul').hasClass('dropdown-menu')) {
            parent.parents('.dropdown').addClass('active');
        }
        parent.addClass('active');
    });
</script>

这篇关于jQuery的.active添加到引导导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！