Bootstrap 3.3.1 - Highlight Current Navigation Menu Item

Question

The script that I use currently works well actually, as long as I keep my file structure like this:

http://website.com/
http://website.com/page1.php
http://website.com/page2.php
http://website.com/page3.php

but when I impliment my mod_rewrite code to take away the ".php"

http://website.com/
http://website.com/page1
http://website.com/page2
http://website.com/page3

my navigation highlight script stops working.

Here is how I implement my code

The HTML

<body id="page1">

The JS

$(function() {

    //highlight the current nav
    //each of the following lines represents a different page
    $("#page1 a:contains('Page 1')").parent().addClass('active');
    $("#page2 a:contains('Page 2')").parent().addClass('active');



});

The ID within the JS looks for the ID within each body tag, and the part that says ('Page 1') looks for the item within the menu to identify which menu item to highlight. As I said, it works fine, until take away the .php. I'm assuming it has something to do with .parent within the js, but I'm not sure what to replace it with, or how to make it work right. Any suggestions?

Can you provide a fiddle or a screenshot of your page to illustrate the issue? — nalinc, Jan 29 '15 at 07:20
So, if I understand correctly, each of your pages have an unique `` id? Like, if `page2.php` is called, `` and that's the active page, right? — Ramiz Wachtler, Jan 29 '15 at 07:22
@NLN - I am not sure what fiddle is, except for the musical instrument, I'll have to google it! When you say a screen shot, do you mean of the code, or of the actual web page? Currently I don't have it available online, I am working on it on my workstation with MAMP. — Aileen Bea, Jan 29 '15 at 07:31
@AileenEverlast: Can you somehow share the **structure of code** for your 'navigation menu' ? I mean, how are your (anchor tags) wrapped ? Since .parent() is not working as you mentioned, thats probably because you are adding 'active' class at wrong place ? — nalinc, Jan 29 '15 at 07:46
@NLN I have figured out this fiddle thing, here is a link http://jsfiddle.net/aileeneverlast/su9LjL4w/ — Aileen Bea, Jan 29 '15 at 07:56
[Here](http://jsfiddle.net/vxq8qnpf/) is a link to your updated fiddle. Change the body ID and you can "switch" through navigation. — Ramiz Wachtler, Jan 29 '15 at 08:06
@RamisWachtler - I wanted to let you know that the last solution you just posted above [Solution](http://jsfiddle.net/vxq8qnpf/) worked perfectly! Thank you so much for your help, I do very much appreciate it! If you would like, you can update your answer that you posted here, and I will place a check mark next to it :-) Thank you soooooo much! — Aileen Bea, Jan 29 '15 at 15:13
@AileenEverlast no problem! I'm glad I could help you! (Answer is updated) ;-) — Ramiz Wachtler, Jan 29 '15 at 16:34
@RamisWachtler - Hello once again! I was working with this JS that you helped me with, and I have run into a problem. It works great on pages 1 - 5, but when I use the id page6 it no longer functions on the 6th page - is there a way to make this work beyond page 5? [Fiddle](http://jsfiddle.net/aileeneverlast/vxq8qnpf/8/) - Thank you once again for your patients and help! — Aileen Bea, Jan 30 '15 at 00:27
@RamisWachtler - my goodness you are quick! Thank you once again :-) — Aileen Bea, Jan 30 '15 at 00:44

Ramiz Wachtler · Accepted Answer · 2015-01-30T00:36:31.120

1

If the <body> tag in each of your pages, contains an unique ID, you could just check if this id is existing.

Like this (UPDATED):

for(var i = 0; i < $(".menu-item").length; i++){
    var item = i+1;
    if($("#page"+item).length>0){
        $("li:nth-child("+item+")").addClass("active");
        break;
    }
}

UPDATE Your updated fiddle

Fiddle

edited Jan 30 '15 at 00:36

answered Jan 29 '15 at 07:29

Ramiz Wachtler

5,623
2
28
33

I apologies for my ignorance - am I suppose to replace this with the JS I already have - or am I suppose to somehow integrate it into the script? I tried replacing it with the script you provided, but I'm afraid it didn't work. Thank you so much for taking the time to help me! – Aileen Bea Jan 29 '15 at 07:37
It should replace your code. Could you also post the content of your page1.php or at least your navigation? – Ramiz Wachtler Jan 29 '15 at 07:40
I've also added a fiddle to my answer, check it out. – Ramiz Wachtler Jan 29 '15 at 07:52
The ID in the `` tag identifies the correct page, and the bit of code that says `a:contains('Page 1')` looks for the text within the `
` tag to identify which menu item to highlight. does that make sense?

Aileen Bea

Jan 29 '15 at 07:55

It will add `.active` class to every matching element. Example: `// will match because there is an element "Home" on page1 $("#page1 a:contains('Home')").parent().addClass('active'); // will ALSO match because there is also an element "Rates" on page1 $("#page1 a:contains('Rates')").parent().addClass('active');` – Ramiz Wachtler Jan 29 '15 at 07:57

Bootstrap 3.3.1 - Highlight Current Navigation Menu Item

1 Answers1