Question

I’ve had a look around & can’t see an answer to this, I’m a bit of a novice with JS so bear with me!

I’m working on a small site design which uses the Coda style slider from jQuery4Designers.
Part of the design is to have an underscore prefixed to the active navigation link. So I’ve attempted to by creating a variable and then updating the existing function in the JS for the slider. Now this works:

var activeLink = $('#nav li a.selected').text();

// handle nav selection
function selectNav() {
    $(this)
        .parents('ul:first')
            .find('a')
                .removeClass('selected')
                .text(activeLink) //this ensures the non-active link has no underscore
            .end()
        .end()
        .addClass('selected')
        .text("_" + activeLink); //this adds the underscore to the active link
}

The problem I have is that this makes every link the original active link I believe the varible isn’t updated to display the new a.selected. So If my first active link was “Item One”, I end up having the whole list displaying “Item One” for every li

Please can someone tell me how to achieve this,as I am unsure how to proceed.

Thanks in advance, please let me know if I can give any additional information.

George

Answer 1

Well, you set activeLink to “Item One” and then give it to every element of ul:first a. That’s what your code does.

Instead of this variable, consider dynamically adjusting the existing value of each element, using the fact that you can give .text() a function:

// handle nav selection
function selectNav() {
    $(this)
        .parents('ul:first')
            .find('a')
                .removeClass('selected')
                .text(function(index, text) {
                    return text.replace(/^_/, '');
                }) //this ensures the non-active link has no underscore
            .end()
        .end()
        .addClass('selected')
        .text(function(index, text) {
            return "_" + text;
        }); //this adds the underscore to the active link
}

^{Untested. May contain bugs.}