Javascript/jQuery navigation based on URL path

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...

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.

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 » or arrow to signify that page is current.

Something like this, but not exactly... Can you provide me something more easily explained...

//$(document).ready(function () {

      //  $('li#current a:eq(0)').html("» " + $('li#current a:eq(0)').html());

    //});

My code is below... I hope there is a way you can help me out! Thanks!

<!-- Left Navigation starts here -->
            <!-- if IE -->
            <div id="IE_nav">
            <!-- endif IE -->
            <div id="left_nav">
                <ul>
                    <a href="http://www.smilesofomaha.com/_dev/general/"><li id="main_nav_1" class="nav_button">MAIN NAV BUTTON</li></a>
                                <li class="sub_nav_box" id="main_1" style="display: none;">
                                    <ul>
                                    <li id="link1" class="not_active"><a href="#LINKHERE"><div id="raquo1" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    <li id="link2" class="not_active"><a href="#LINKHERE"><div id="raquo2" class="raquo"><img src="../../images/pip_arrow.png" /></div>SUB NAV-ITEM HERE</a></li>
                                    </ul>
                                </li>
                    <a href="http://www.smilesofomaha.com/_dev/cosmetic/"><li id="main_nav_2" class="nav_button">MAIN NAV BUTTON 2</li></a>
                                <li class="sub_nav_box"  id="main_2" style="display: none;">        
                                    <ul>
                                    <li id="link3" class="not_active"><a href="#"><div id="raquo3" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    <li id="link4" class="not_active"><a href="#"><div id="raquo4" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    </ul>
                                </li>

<script type="text/javascript">

var url = window.location.href; 
url = url.split('/');

if (url[4] == "MAIN NAV BUTTON 1")
 {
  document.getElementById("main_1").style.display = 'block';
  document.getE开发者_JS百科lementById('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';
        }

    }
</script>

Assuming I haven't misunderstood you somewhere: you could have jQuery handle the searching for you with selectors.

Assuming your anchor tag contains the actual URL -- it's not clear since you seem to have some incomplete/pseudo-code HTML (e.g. "#", "#LINKHERE" etc) -- you can search against the href directly, e.g.

$("a[href=" + url + "]")

will select an anchor tag with the specified URL.

So assume you have a structure like this:

<ul>
    <li><a href="/apple/oranges/3">Some link</li>
    <li><a href="/apple/banana/4">Another link</li>
</ul>

And you use a selector with your parsed URL:

var parsedUrl = "/apple/orange/3"; // I've used a string here for clarity
var currentAnchor = $("a[href=" + parsedUrl + "]");

Now you have a starting point to apply your css.

Say you want to add in your >> symbol, then:

currentAnchor.text(">>" + currentAnchor.text())

Say you want to add some classes:

currentAnchor.addClass("active");

You can also access other elements relative to this anchor with various selectors, e.g.

currentAnchor.parents("li").css("display", "block");

So you can end up with a generic block of code instead of the giant if monster you have:

var parsedUrl = "/apple/orange/3"; // I've used a string here for clarity
var currentAnchor = $("a[href=" + parsedUrl + "]");
currentAnchor.addClass("active");
currentAnchor.parents("li").css("display", "block");

And you also wouldn't need to reference any element directly by id with this approach.

I realize that this isn't directly answering your question- but maybe an alternative train of thought you might consider.

Consider targeting the active menu item with a body id. It's a little bit cleaner, and you might find it more extensible/maintainable in the long run.

Example HTML:

<body id="home>
...
<ul class="nav"
  <li class="home"><a>Home</a</li>
  <li class="about"><a>About</a</li>
</ul>

CSS:

li.home, li.about {font-weight: normal}
#home li.home, #about li.about {font-weight: bold}

You can use CSS tricks to spoof the ">>" (creating a background image would be the easiest).

Keeping the url splitting logic as it is you can use JQuery to find the element and apply css class etc to simplyfy your code. Based on your requirement use appropriate selectors and set the class and other properties to the element.

That's interesting ~

I have a simple idea for you.. However, I reckon the idea from Luke is my ideal solution

HTML:

<ul id='menu'>
    <li><a href='link1' id='default_item' level='1'>item 1</a></li>
    <li><ul><li>
        <a href='link2' level='2'><div>sub item 1</div></a>
        <a href='link3' level='2'><div>sub item 2</div></a>
        </li></ul>
    </li>
    ...
</ul>

JAVASCRIPT:

var url = window.location.href; 
// changing something link http://www.google.com/search?blabla=foo
// into "search?blabla=foo"
// that is sort-of normalisation
url = url.replace(/^\w+\:\/\/[^\/]+?\//, '', url);

$currA = $('#default_item');
$('#menu').find('a').each(function(){
    // getting the href of current 'a' element
    var lnk = $(this).attr('href');
    // also normalise your href 
    lnk = lnk.replace(/^\w+\:\/\/[^\/]+?\//, '', lnk);

    // well, we get the current a ~!
    if(lnk == url){
        $currA = $(this);
    }
}

if($currA.attr('level') == 1){
    var $li = $currA.parents('li:eq(0)');
} else {
    // manipulating your sub-item
    $currA.addClass('active')
    .find('div').css('display', 'block');

    // getting the level-one li element
    $li = $currA.parents('li:eq(1)');
}

// manipulating your menu items
$li.addClass('nav_selected')
.next().css('display', 'block');