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> <a href="#blue" onclick="return update(this)">blue</a>'; }