Edit in JSFiddle

var fns = {};
         
fns.red = function(n){
    n = n || '';
    document.body.style.backgroundColor = n;
}
         
fns.blue = function(n){
    n = n || '';
    document.body.style.backgroundColor = n;
}
         
function update(a){
             
    // A(앵커) 엘리먼트의 기본 동작을 중지 시킨 후 onclick 이벤트를 할당해 처리한다.
    // 코드가 이와 같이 작성된 이유는? A 엘리먼트의 기본 동작이 실행된 후에도 해당 URL의 hash 내역은 적용된 현 상태가 아닌 이전 상태(주소줄에 변경 전 상태)의 내역을 가져 오기 떄문이다.
    // 즉, 아래 코드와 같이 명시적으로 A 엘리먼트의 href 속성에 할당된 URI를 window.location.hash 값에 적용 후 다시 해당 hash 값을 반환받아 처리한다.
    // 또한, 이렇게 하면 히스토리에 해당 링크가 추가된다. 하지만 주소가 바뀌어도 페이지를 다시 로드하지 않으므로 페이지 상태는 변경 되지 않는다.

    a = a || document.createElement('a');

    var n = window.location.hash = a.href.split('#')[1] || '';

    fns[n].call(this, n);
             
    return false;    
}

window.onload = function () {
    document.body.innerHTML = '<a href="#red" onclick="return update(this)">red</a>&nbsp;<a href="#blue" onclick="return update(this)">blue</a>';
}