title: Javascript/jQuery navigation based on URL path
body: <p>The following code is a vertical navigation menu in HTML/CSS/Javascript... The look/feel is primarily made with ul/li's and CSS ids/classes... It is also important to mention this nav is an include file...</p>
  
  <p>So here is my problem... Basically, I know this Javascript is a really basic/beginner way to get this to do what I want. I was wondering if there was some jQuery or another way to simplify this code. What needs to happen is that the browser's URL needs to be called and split up so that it recognizes the path and displays the correct NAV and sub-nav depending on which page (or /path) is currently being displayed.</p>
  
  <p>This may help further explain my needs/wants:
  I want to simplify this code so I don't have to make a ton of different ID's and classes for the LI's and have to write so much javascript. Isn't there a way in jQuery to just find the current page through the URL, and if it is current, I want that part of the included navigation menu to be bold and insert a &raquo; or arrow to signify that page is current.</p>
  
  <p>Something like this, but not exactly... Can you provide me something more easily explained...     </p>
  
  <pre><code>//$(document).ready(function () {
  
        //  $('li#current a:eq(0)').html("» " + $('li#current a:eq(0)').html());
  
      //});
  </code></pre>
  
  <p>My code is below... I hope there is a way you can help me out! Thanks!</p>
  
  <pre><code>&lt;!-- Left Navigation starts here --&gt;
              &lt;!-- if IE --&gt;
              &lt;div id="IE_nav"&gt;
              &lt;!-- endif IE --&gt;
              &lt;div id="left_nav"&gt;
                  &lt;ul&gt;
                      &lt;a href="http://www.smilesofomaha.com/_dev/general/"&gt;&lt;li id="main_nav_1" class="nav_button"&gt;MAIN NAV BUTTON&lt;/li&gt;&lt;/a&gt;
                                  &lt;li class="sub_nav_box" id="main_1" style="display: none;"&gt;
                                      &lt;ul&gt;
                                      &lt;li id="link1" class="not_active"&gt;&lt;a href="#LINKHERE"&gt;&lt;div id="raquo1" class="raquo"&gt;&lt;img src="../../images/pip_arrow.png" border="0"/&gt;&lt;/div&gt;SUB NAV-ITEM HERE&lt;/a&gt;&lt;/li&gt;
                                      &lt;li id="link2" class="not_active"&gt;&lt;a href="#LINKHERE"&gt;&lt;div id="raquo2" class="raquo"&gt;&lt;img src="../../images/pip_arrow.png" /&gt;&lt;/div&gt;SUB NAV-ITEM HERE&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                      &lt;a href="http://www.smilesofomaha.com/_dev/cosmetic/"&gt;&lt;li id="main_nav_2" class="nav_button"&gt;MAIN NAV BUTTON 2&lt;/li&gt;&lt;/a&gt;
                                  &lt;li class="sub_nav_box"  id="main_2" style="display: none;"&gt;        
                                      &lt;ul&gt;
                                      &lt;li id="link3" class="not_active"&gt;&lt;a href="#"&gt;&lt;div id="raquo3" class="raquo"&gt;&lt;img src="../../images/pip_arrow.png" border="0"/&gt;&lt;/div&gt;SUB NAV-ITEM HERE&lt;/a&gt;&lt;/li&gt;
                                      &lt;li id="link4" class="not_active"&gt;&lt;a href="#"&gt;&lt;div id="raquo4" class="raquo"&gt;&lt;img src="../../images/pip_arrow.png" border="0"/&gt;&lt;/div&gt;SUB NAV-ITEM HERE&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
  </code></pre>
  
  <p>
              </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var url = window.location.href; 
  url = url.split('/');
  
  if (url[4] == "MAIN NAV BUTTON 1")
   {
    document.getElementById("main_1").style.display = 'block';
    document.getElementById('main_nav_1').className = 'nav_selected';
  
      if(url[5] == "URL PATHNAME SUB NAV-ITEM") {
          document.getElementById("link1").className = 'active';
          document.getElementById("raquo1").style.display = 'block';
      }
  
      if(url[5] == "URL PATHNAME FOR SUB NAV-ITEM") {
          document.getElementById("link2").className = 'active';
          document.getElementById("raquo2").style.display = 'block';
      }
   } 
  
  if (url[4] == "URL PATH FOR MAIN NAV BUTTON 2")
  {
    document.getElementById("cd").style.display = 'block';
    document.getElementById('cd_nav').className = 'nav_selected';
  
      if(url[5] == "URL TO PATHNAME FOR SUB NAV-ITEM") {
          document.getElementById("link3").className = 'active';
          document.getElementById("raquo3").style.display = 'block';
      }
  
  
          if(url[5] == "URL TO PATHNAME FOR SUB NAV-ITEM") {
              document.getElementById("link4").className = 'active';
              document.getElementById("raquo4").style.display = 'block';
          }
  
      }
  &lt;/script&gt;
  </code></pre>