improving my Javascript code: set a style of a link in page nav bar
<p>a javascript+DOM question.</p>

<p>Can someone improve my code?</p>

<p>I have a page nav bar like this (on some pages):</p>

<pre><code>&lt;div id="pagebar"&gt;
&lt;a href="iraq_pixra1.html"&gt;1&lt;/a&gt;
&lt;a href="iraq_pixra2.html"&gt;2&lt;/a&gt;
&lt;a href="iraq_pixra3.html"&gt;3&lt;/a&gt;
&lt;a href="iraq_pixra4.html"&gt;4&lt;/a&gt;
&lt;a href="iraq_pixra5.html"&gt;5&lt;/a&gt;
&lt;a href="iraq_pixra6.html"&gt;6&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>I want my javascript to change the link style so that the style of the current page is highlighted.</p>

<p>My javascript code is this. It finds the current page's url, then try to match it with one of the link tag. If match, then set style.</p>

<pre><code>function setPageBarStyle() {
    var pageNavBar = document.getElementById("pagebar");

    if (pageNavBar != null) {
        var fPath = document.location.pathname;
        var fPathParts = fPath.split('/');
        var fName = (fPathParts[fPathParts.length-1]); // file name after last slash. e.g. xyz.html

        var linkTags = pageNavBar.getElementsByTagName("a");
        for (var ii = 0; ii &lt; linkTags.length; ii++) {
            var aUrl = linkTags[ii].href;
            var aUrlParts = aUrl.split("/");
            var aUrlLastPart = (aUrlParts[aUrlParts.length-1]); // part after last slash. e.g. xyz.html
            if (aUrlLastPart == fName) { 
                linkTags[ii].style.border="thin solid blue";
            }
        }
    }
}

setPageBarStyle();
</code></pre>

<p>How can i improve the code? I am new to DOM scripting.</p>

<p>The way i split the path seem too verbose, with many variables. I think it can be done with regex, but don't know how with javascript/DOM.</p>

<p>Thanks.</p>
