0

I have a few pages, and I have this nav bar - home, page 1, page 2.

I want to make the home bar to highlight when i'm on home page, and page 1 to highlight when I'm on page 1.

I did something like this

var url = window.location.pathname;
    var filename = url.substring(url.lastIndexOf('/')+1);
    alert(filename);

Currently this will only alert when I'm at the home page, but not on page 1 or page 2. I wanted to do an if statement to check current html page, if home, highlight home, if page 1 highlight page 1 nav bar and so on.

Anyone can help on how to make it alert whenever I'm on a new html page or have better suggestion on what I'm doing?

hynekcer
  • 14,942
  • 6
  • 61
  • 99
Devon
  • 159
  • 1
  • 2
  • 15
  • create a js file , paste your code in that file, include it in html files..! – Sudhir Bastakoti Nov 03 '14 at 07:58
  • may be you can add a css class to highlight the nav bar and add thatn class to the nav bar on pageload of each page. – threeleggedrabbit Nov 03 '14 at 08:00
  • @DemoUser you mean't copy and paste this code on every js that cater for each page? I was thinking of just putting this code on a global Js to check for everypage is that possible – Devon Nov 03 '14 at 08:02
  • @hsakarp i used to do that, one css file for each page so i can easily achieve that, but now i'm tasked to only use 1 css file for every page and idk how to do that. – Devon Nov 03 '14 at 08:03
  • i understood that you have to have single script file for all the pages, you can create a one single method and add pass on the page name to the method to change the css class.but,this must ask you to write the onload method in all the pages. – threeleggedrabbit Nov 03 '14 at 08:12
  • For each html page you have, put the following in the head tag:
    ` ` Every html file that has these tags included will essentially be linked to jsfile.js and cssfile.css. The whole point of using CSS is to simplify your styling code to one file, rather than creating a style for each individual page. So you're probably best off using just one CSS and one JS file.     – Dan Chrostowski Nov 03 '14 at 08:13
  • @2rare2die hi, i do have all my html files linked to my .js and .css, it just that my code only get activated while on the home page, not on any other page – Devon Nov 03 '14 at 08:18
  • @Devon Ok, understood then, I'll give you answer to this with some code in a couple minutes. – Dan Chrostowski Nov 03 '14 at 08:19
  • silly me, after a recent check again i forgot to add a .js to one of my html reference.. thanks @2rare2die can u provide me a code to change the .a:visited using jquery instead? – Devon Nov 03 '14 at 08:19
  • @Devon, there used to be a simple way to do this in jQuery, but for security reasons, it's not so simple anymore (http://stackoverflow.com/a/23358854/4077025). The easiest way to do this is to include this in your CSS file: `a:visited { color: yellow; } ` – Dan Chrostowski Nov 03 '14 at 08:58

2 Answers2

0

Create a js Method ChangenavColor('Pagename') in the common js file.

add a class .activeNavColor in the common Css file.

On page load of each page call the ChangenavColor('Pagename') and assign the active class to that particular nav bar.

threeleggedrabbit
  • 1,722
  • 2
  • 28
  • 60
0

So, a relatively simple way to handle this. Assuming you're including jQuery in your HTML pages, put this in your JS file:

$(document).ready(function() {
   alert("The current page path is " + window.location.pathname);

    var path = window.location.pathname;

    if(path == '/homepage.html')
            $('#homePageNav').addClass('activeNavColor');
    else if(path == '/page1.html')
            $('#pageOneNav').addClass('activeNavColor');

});

(note: you will probably want to use the removeClass() function in your conditionals or else all of your nav elements will be colored.)

As Hsakarp said, I would maybe consider putting this in its own JS function.

Your CSS file should have a block in it that will look something like this:

.activeNavColor {
    background-color: orange;
}

Edit:

Make sure your nav elements are assigned IDs. In the example I provided, jQuery will be looking for navs with IDs homePageNav and pageOneNav.

Dan Chrostowski
  • 337
  • 2
  • 8