PHP版本导航和分类高亮显示实例步骤

1、头部模版代码
<div class="nav" id="nav">
<ul>
<li id="index" class="{$=#ngenre}"><a href="{$=ii_get_actual_route('./')}"><span class="font1">首&nbsp;&nbsp;页</span><br />
<span class="font2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</span></a></li>
<li id="photo" class="{$=#ngenre}"><a href="{$=ii_get_actual_route('photo')}"><span class="font1">摄影作品</span><br />
<span class="font2">Photography</span></a></li>
<li id="model" class="{$=#ngenre}"><a href="{$=ii_get_actual_route('model')}"><span class="font1">模特资料</span><br />
<span class="font2">Model Data</span></a></li>
</ul>
</div>

{$=#ngenre}获取模块名，把导航菜单项目,按照对应的模块名称id命名，方便通过js对对应的id的菜单项目增加on

2、首页模版添加
<script type="text/javascript">document.getElementById("index").className = "on";</script>

3、列表页模版添加
<!-- top menu hover -->
<script type="text/javascript">document.getElementById("{$=#ngenre}").className = "on";</script>
<!-- side menu hover -->
<script type="text/javascript">document.getElementById("{$=$ngenre}{$classid}").className = "on";</script>

{$classid}获取动态分类id

4、内容页模版添加
<!-- top menu hover -->
<script type="text/javascript">document.getElementById("{$=#ngenre}").className = "on";</script>
<!-- side menu hover -->
<script type="text/javascript">document.getElementById("{$class}").className = "on";</script>

程序去获取文章详情页的文章所在分类ID,然后给菜单有这个ID的菜单项目增加一个class=on

5、sort分类调用节点
<li id="{$id}">
获取动态id数字

6、css文件添加样式
.nav2 ul .on > a{ color:#ad223f!important; }
.nav .on a { background:#af2242; }
子元素功能 li>a 故名 on > a

随便记录下.net版本JS代码
<!-- top menu hover -->
<script type="text/javascript">document.getElementById("{$=$ngenre}").className = "on";</script>
<!-- side menu hover -->
<script type="text/javascript">document.getElementById("{$=$ngenre}{$-class}").className = "on";</script>