q/22124814/1636522

by wared

CSS

.top a {
    color: red;
}

JavaScript

var page = 'skillsets.php';

$('body').html(mkhtml(
    mklist(page, [
        { href: 'index.php', label: 'Home' },
        { href: 'skillsets.php', label: 'Skillsets' },
        { href: 'gallery.php', label: 'Gallery' },
        { href: 'about.php', label: 'About' },
        { href: 'contact.php', label: 'Contact' }
    ])
));

function mkhtml(list) {
    var html = [], l = list.length, item;
    while (item = list[html.length]) {
        html.push(
            '<li' + (html.length ? '' : ' class="top"') + '>' +
                '<a href="' + item.href + '">' + item.label + '</a>' +
            '</li>'
        );
    }
    return '<ul id="nav">' + html.join('') + '</ul>';
}

function mklist(href, deflist) {
    var list, idx;
    list = deflist.slice(); // copy
    idx = indexOf(href, list);
    if (idx !== -1) {
        list = list.splice(idx, 1).concat(list);
    } else {
        list.unshift({ 
            href: '404NotFound.php', 
            label: '<icon><img src="images/404-icon.png"></icon>404' 
        });
    }
    return list;
}

function indexOf(href, list) {
    var i = -1, l = list.length;
    while (++i < l) {
        if (href === list[i].href) return i;
    }
    return -1;
}