보통은 각 페이지 마다 어느 Menu 인지 구분하는 변수를 둬서, 해당 메뉴일 경우 active style 을 지정해 주는 방식으로 구현 합니다.


ex)

$menu_id = 'gnu';

<ul class="ui-menu">
    <li <?=$menu_id=='gnu' ? class='on' : ''?>> <a href=""> GNU </a></li>
    <li <?=$menu_id=='free' ? class='on' : ''?>> <a href=""> FREE</a></li>
</ul>

물론 이건 아주 간단한 방법이고, 이 외에도 script 로 처리 하는 방법 (ex. :eq(메뉴순서)) 등 생각하는 것에 따라 여러 방법으로 구현 가능합니다.

윗분이 php script 으로 알려드렸는데 script 으로 어떻게 짜야할지 감이 안오신다니... 혹시 자스를 말씀하시는건지....

자스도 script 이고 php 도 script 언어입니다. ㅎㅎㅎㅎ

제가 한글이 약간 난독증이 있어서요... 잘 이해가 안되긴 하는데....

jQuery 로는 페이지 명에 따라 class 를 줘서 highlight 해주는 방법이 있습니다.

var str=location.href.toLowerCase();
$(".navigation li a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
 $("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
 });


윗분 방법이 제일 간단하긴 한데, 혹시 페이지중 php 페이지가 아닌 html 인 경우, 그래서 php 를 사용할 수 없는 경우 jQuery 로 이렇게도 합니다.


저 위의 jQuery 방식처럼 css class 를 더해주는 방식을 php 로 하자면

<li class="menuitem <?php if($page=='bible'){echo 'active';}?>

이런식으로 하시면 css class "active" 가 li 에 더해지겠죠.

그리고 css 로 "active" class 만 다른색으로 표시하면 될거고....

사실 위에분이 알려주신 것 과 같은 방식입니다. 단지 scripting 을 조금 다르게 했을 뿐 입니다.

variable 에 따라 (이 예에서 variable 은 페이지명이죠) class 를 더해준다 는 차원에서 보면 모두가 동일한 방법입니다.