尝试使用jQuery操作CSS样式

Question

I have a navigation bar at the side of a page and want to highlight one of several entries depending on GET-parameters.

After a little Reading I came to this solution, but it does not seem to work:

in the .html:

<script type="text/javascript">
    $(document).ready(highlight_me());
</script>

the JS functions:

function highlight_me() {
    // ensure all links have class 'regular'
    document.links.className = 'regular';
    // determine which link to highlight
    var id = 'home';
        switch (querystring('view')) {
            case "set":
                id = 'settings';
                break;
            case "mc":
                id = 'messages';
                break;
            default:
                id = 'home';
        }
    // highlight link
    document.getElementById(id).className = 'highlight';
}

function querystring(key) {
    // extract GET-value for key
    var re = new RegExp('(?:\\?|&)' + key + '=(.*?)(?=&|$)', 'gi');
    var r = [], m;
    while ((m = re.exec(document.location.search)) != null) r[r.length] = m[1];
    return r;
}

the CSS classes:

a, a.regular, a:visited {
    color: #f0ce96;
}

a:active, a:hover, a.highlight {
    text-decoration: underline;
    color: #ffeebb;
}

I'd be thankful for a hint that points me to where I go wrong, here.

Answer 1

调用Highlight_me函数时，您没有传递“ id”参数。

Answer 2

Any reason why you need id as a parameter? You're not using it anywhere inside the function. Shouldn't a call to querystring be enough? In that case, you don't need to do the if(id.length) part. Set id to 'home' by default, and then have the switch statement to modify the variable accordingly.

Here's what I'm talking about:

function highlight_me() {
// ensure all links have class 'regular'
document.links.className = 'regular';
// Set id to home by default
var id = 'home';
    switch (querystring('view')) {
        case "set":
            id = 'settings';
            break;
        case "mc":
            id = 'messages';
            break;
        default:
            id = 'home';
    }
// highlight link
document.getElementById(id).className = 'highlight';
}

Answer 3

function $(highlight_me()); want a parameter id which is not supply when you call this function.And put your function inside document.ready .

 $(document).ready(function() {
   // put all your function here.
 });