Bootstrap make menu item active

Question

I have this url www.url.com/photos that will make the "photos" item on my menu active. However, if I go to the edit page www.url.com/photos/edit, the active item disappears. I have discovered that this is where the active item is being controlled but how do I make it so that it will remain active even in my edit pages?

This is the code I found

var url = window.location;
//    console.log(url);
    // var element = $('ul.nav a').filter(function() {
    //     return this.href == url;
    // }).addClass('active').parent().parent().addClass('in').parent();
    var element = $('ul.nav a').filter(function() {
        return this.href == url;
    }).addClass('active').parent();

    while (true) {
        if (element.is('li')) {
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }

EDIT : I found a solution in the end. Thank you for everyone who helped!

Replace my code with this one

var element = $('ul.nav a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('li')) {
        element.addClass('active');
    }

use a regex for this, this should prove sufficient https://regex101.com/r/iqRw7d/1 — Dev Man, Apr 22 '17 at 05:24
Thanks! But where do I place this regex? in the part before the filter? — JianYA, Apr 22 '17 at 05:34

Nimisha Molia · Answer 1 · 2017-04-22T07:40:21.610

0

check below fiddle you can use .indexof and change href variable with this.href in your code

jsfiddle

edited Apr 22 '17 at 07:40

answered Apr 22 '17 at 06:41

Nimisha Molia

175
9

Hey thanks! But this assumes that only photos will be chosen at the time? – JianYA Apr 22 '17 at 07:07
Hey if my url is window.location what will the href be? – JianYA Apr 22 '17 at 07:32
url = window.location.href that is current page url and href is this.href check updated fiddle – Nimisha Molia Apr 22 '17 at 07:37

score 0 · Answer 2 · edited May 23 '17 at 12:25

How about instead of using a filter, try using an attribute selector https://www.w3schools.com/cssref/css_selectors.asp. The approach I'll take will cut off the first url path segment (Regex to get first word after slash in URL) and target the href that contains that word.

const active_path = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');

// element is a vague variable name here, what is this element?
// maybe we could rename it to navigation_tab

const element = $(`ul.nav a[href*=${active_path}]`).addClass('active').parent();

// no idea what your while statement was trying to do,
// but passing while(true) will always be true so let's
// rewrite that to just be an if statement. You also don't
// need an else if you're just trying to accomplish one thing.
// This also is very unreadable code, as I have no idea what
// you're trying to accomplish. As you get better, you'll learn
// to create code that can read like a book and tell anyone what
// you're trying to accomplish. I would also encourage you to
// learn how to do these things without relying on jQuery. good luck!

if (element.is('li')) {
  element = element.parent().addClass('in').parent();
}

Revision

I wonder if you're not really understanding how the .parent() works. If you're trying to add the class to the parent element, then you need to have parent() before. But I would separate those concerns by defining the element first and then adding your class later.

const active_path = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');
const active_tab = $(`ul.nav li a[href*=${active_path}]`).parent();
active_tab.addClass('active');

https://codepen.io/jaruesink/pen/PmzKjo?editors=1111 (see comments for more details)

If this doesn't work for you then double check to see if you can use ES6 syntax. I would recommend developing in Chrome/Safari or figuring out how to use Babel. Or if you still can't use ES6 syntax, then you need to change the const to vars and $(ul.nav li a[href*=${active_path}]) to $('ul.nav li a[href*='+active_path+']')

Hey thanks for answering, I tried this but it doesn't seem to work. — JianYA, Apr 22 '17 at 07:09
Hmm. After I wake up, I'll see if I can put into a codepen and figure out what's going on. — jaruesink, Apr 22 '17 at 09:30

score 0 · Answer 3 · answered Oct 13 '17 at 12:14

var storedListItem = sessionStorage.getItem('selectedListItem');
$("ul.nav > li > a:eq("+(storedListItem)+")").addClass("active");
$("ul.nav > li").on("click",function(){
    var index = $(this).index('ul.nav > li');
    var selectedListItem = index;
    sessionStorage.setItem('selectedListItem', JSON.stringify(selectedListItem));
});

this sets the click list item in an unordered list to the active menu item.

Bootstrap make menu item active

3 Answers3