Bootstrap navbar active class

Question

I try to use jquery to initialize active class from navigation, but so far it works only if there's nothing else after the menu item in url.

For ex, if i go on users site.com/users the code works, but when i browse the controller and i give it parameters it disappears ex site.com/users/param1/param2

below you can see my code:

$(document).ready(function () {
    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function () {
        return this.href == url;
    }).parent().addClass('active').parent().parent().addClass('active');
});

So this can be done but first i need to know what is the logic behind it. so how we should understand if some parameters given are just parameters or new pages? — Mishel Parkour, Mar 09 '18 at 00:20
I mean lets say you have links like this: site.com/user site.com/user/view or site.com/user/activity and such. so they are pages not parameters — Mishel Parkour, Mar 09 '18 at 00:21
so what should be the rule behind it/? is it always like this? first section is url the others are parameters? like does this apply to all of you links? so any links like site.com/AAA/BBB/CCC/DDD only AAA is the page and shoud behaved like page? so if this can apply i can give you the answer — Mishel Parkour, Mar 09 '18 at 00:22
I have like this `Users/10` where the parameter represents the pagination — Terchila Marian, Mar 09 '18 at 00:23
i know so does this rule apply to all of you site links? so is it like u dont have any pages like `users/purchase/10`? or `users/activity/10`? — Mishel Parkour, Mar 09 '18 at 00:25

mejiajuanbta · Answer 1 · 2018-03-09T00:52:06.817

0

try this:

$('ul.nav a').filter(function () {
        return url.href.indexOf(this.href) >= 0;
    }).parent().addClass('active').parent().parent().addClass('active');

edited Mar 09 '18 at 00:52

answered Mar 09 '18 at 00:25

mejiajuanbta

176
10

Mishel Parkour · Answer 2 · 2018-03-09T00:42:24.187

0

So lets say you have urls in this format /AAA/BBB/CCC/.... so this code will make your link to recognize all of the links /AAA/BBB/... and /AAA/XXX/....and such as same page.

$(document).ready(function () {
    var url = window.location;

    // this will break your url and put parts in array for
    // first item is the one you call it page
    var urlParts = url.split("/"); 

    // will work only on links like /AAA
    $('ul.nav a[href="' + urlParts[0] + '"]').parent().addClass('active');

    // so we need to use custom filters
    $('ul.nav a').filter(function () {
        var hrefParts = this.href.split("/");
        return hrefParts[0]==urlParts[0];// so you need to check if they should be 0 or 1 based on how your links are like: /AAA/ or AAA
        // also in case your links are like absolute paths you need more effort.
    }).parent().addClass('active').parent().parent().addClass('active');
});

Edited: Now should work. But you need to play with it. So this is the whole idea I think you can do it like check link types you have and based on your situation you should change things in your code.

edited Mar 09 '18 at 00:42

answered Mar 09 '18 at 00:30

Mishel Parkour

599
5
16

Now it's totally broken :D – Terchila Marian Mar 09 '18 at 00:42
I guess i can add in each view a js which adds the active class. Nope, still not working – Terchila Marian Mar 09 '18 at 00:43
so i need to open my editor and xamp and try to simulate your problem so i can give you the correct answer so before that. let us try this. do you get the whole idea? you should use JavaScript location and try to split it with `.split("/")` so you get access to its segments. then you wanna compare the first segment to first segment of your links. so you should use filter and instead of checking ` this.href == url;` you need to check first segment of href with first segment of url like this `hrefParts[0] == urlParts[0];`. so tell me did you get the whole idea? and do you agree with it? – Mishel Parkour Mar 09 '18 at 00:48
I get it but I don't know a bit of javascript, that's the reason why i came here. I don't want anything special, but that is required and idk how else it could be done :( – Terchila Marian Mar 09 '18 at 00:50
So I need to access your problem so i solve it for you. ways we can do this. team-viewer. u know team-viewer/? i access your pc solve it for you. fastest way. second is you post your simulated problem on somewhere like jsfiddle or someting it would take much time but its safe if you dont trust me or you dont want to share screen with me – Mishel Parkour Mar 09 '18 at 00:53

Bootstrap navbar active class

2 Answers2

Linked