Using Javascript to highlight current page in navbar
<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>
