Why won't the current page on navigation menu stay changed?

Question

I am working on a tumblr theme, and I asked a bit earlier without a code, so I put together this code if it will help you.

I have an if statement that if window.current.href == "the html of home" (which in this case I made the jsfiddle html underneath for testing purposes) and then .css to change the styling as I want it to be. But it doesn't seem to work, any ideas?

Fiddle

HTML:

<div id="headerMenu">
    <ul class="nav">
        <li>
            <a href="http://whatchoodo.tumblr.com/">
                <span id="home">Home</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Dirty">
                <span class="dirty">Dirty Jokes</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Sport">
                <span id="sport">Sport</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Memes">
                <span id="memes">Memes</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Personal">
                <span id="personal">Personal Stuff</span>
            </a>
        </li>
    </ul>
</div>

JavaScript:

$(document).ready(function () { 
    if (window.location.href == "http://jsfiddle.net/RichardWinter/c3vgy00n/2/") { 
        $("#home").css({
            border-bottom+color: #6DC176,
            border-bottom-style: 'solid', 
            border-bottom-width: 3px,
            color: #6DC176, 
            font-weight: 'bold',
        }); 
});

Answer 1

You have a lot of syntax errors. Especially, the object parameter that you are passing to jQuery .css is missing quotes on its properties and values. Also, you if is missing an end-brace.

This should go like this:

if (window.location.href == "http://fiddle.jshell.net/_display/") {
    $("#home").css({
        'border-bottom-color': '#6DC176',
            'border-bottom-style': 'solid',
            'border-bottom-width': '3px',
            'color': '#6DC176',
            'font-weight': 'bold',
    });
}

It is not working for you in Fiddle, also because fiddle uses a frame to show the results. You need to use the frame url to test.

See this: http://jsfiddle.net/abhitalks/c3vgy00n/4/

Click "run" to see the CSS effect on "home".

.

Answer 2

First, your JS has syntax errors, fixed like following:

$(document).ready(function () {
    if (window.location.href == "http://jsfiddle.net/RichardWinter/c3vgy00n/2/") {
        $("#home").css({
            'border-bottom-color': '#6DC176',
            'border-bottom-style': 'solid', 
            'border-bottom-width': '3px',
            'color': '#6DC176', 
            'font-weight': 'bold'
        });
    } 
});

Second, the URL is not matching. The result part on jsfiddle is actually in an iframe ( http://fiddle.jshell.net/RichardWinter/c3vgy00n/2/show/ ).

Third, I guess what you really want to modify is the anchor's ( <a> ) style, rather than its child <span> (this is my assumption, correct me if I was wrong).