title: Using Javascript to highlight current page in navbar
body: <p>I wanted to make a dynamic navigation bar that could identify the current page by highlighting the image buttons border that is related to the page it is on. For example, on the <code>index.html</code> the <code>homeButton.jpg</code> is highlighted. I would like this to be dynamic and not statically coded. I am using templates I would like the main content to be the only thing editable.</p>
  
  <p>This is my HTML code for the navigation bar:</p>
  
  <pre><code>&lt;ul id="navbar"&gt;
    &lt;li&gt;&lt;a href="../index.html" &gt;&lt;img id="theImg" src="../images/Buttons/homeBtn.jpg" name="homebtn" alt="Home" border="0" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../pages/about.html"&gt;&lt;img src="../images/Buttons/aboutBtn.jpg" alt="About" border="0" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../pages/mediapages/media.html"&gt;&lt;img src="../images/Buttons/mediaBtn.jpg" alt="Media" border="0" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../pages/downloads.html"&gt;&lt;img src="../images/Buttons/downloadBtn.jpg" alt="Download"  border="0" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../pages/contactpages/contacts.html"&gt;&lt;img src="../images/Buttons/contactBtn.jpg" alt="contact"  border="0" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="../pages/blog.html" target="_blank"&gt;&lt;img src="../images/Buttons/blogBtn.jpg" alt="blog" border="0" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the JavaScript code:</p>
  
  <pre><code>var examplehtml = [['http://example.com/'],['http://www.example.com/']];
  var navRoot = document.getElementById("navbar").getElementsByTagName("img");
  var currentpage = document.location.href; 
  if(currentpage == examplehtml [0] || currentpage == examplehtml [1] ){
    navRoot[0].src = "../images/Buttons/homeBtn2.jpg";
    return;
  }
  
  var indexpage = currentpage.search(/index.html/);
  var aboutpage = currentpage.search(/about.html/)
  var mediapage = currentpage.search(/mediapages/);
  var downloadpage = currentpage.search(/downloads.html/);
  var contactpage = currentpage.search(/contacts.html/);
  var commentsentpage = currentpage.search(/comment_sent.html/);
  
  
  if(indexpage&gt;-1){navRoot[0].src = "../images/Buttons/homeBtn2.jpg";return;}
  if(aboutpage&gt;-1){navRoot[1].style.border='1px solid #fff';return;}
  else if(mediapage&gt;-1){navRoot[2].style.border='1px solid #fff';return;}
  else if(downloadpage&gt;-1){navRoot[3].style.border = '1px solid #fff';return;}
  else if(contactpage&gt;-1){navRoot[4].style.border='1px solid #fff';return;}
  else if(commentsentpage&gt;-1){navRoot[4].style.border = '1px solid #fff';return;}
  }
  window.onload = Getcurrentpage;
  </code></pre>
  
  <p>I was wondering is there a better way of doing this or anything I can do to improve performance?</p>