freemarker生成的前端代码下使用javascript实现导航菜单高亮显示

一.说明：我是用的这种方式是通过判断href中的值和当前url中的值的是否一致，来实现被点击的栏目不同于其他栏目的高亮显示。这是一个Demo

二.代码：

html代码：

<div class="left2" id="left2">

<ul>

<li><a href="xxx.html" target="_top">栏目1</a></li><br/>

<li><a href="xxx.html" target="_top">栏目2</a></li><br/>

<li><a href="xxx.html" target="_top">栏目3</a></li><br/>

</ul>

</div>

javascript代码：

<!--选中栏目高亮显示的js代码-->

<script type="text/javascript" language="javascript">

var nav = document.getElementById("left2");

var links = nav.getElementsByTagName("li");

var lilen = nav.getElementsByTagName("a");

var currenturl = document.location.href;

var currenturlNumber = currenturl.substring(81); <!--截取对应的栏目id。根据实际需求来-->

var last = 0;

for (var i=0;i<links.length;i++) {

var linkurl = lilen[i].getAttribute("href");

var linkurlNumber = linkurl.substring(15,47); <!--截取对应的栏目id。根据实际需求来-->

if(currenturlNumber.indexOf(linkurlNumber)!=-1){

last = i;

}

}

links[last].className = "hl";

</script>

css代码：

.left2 li{float:left;background:xxxx; margin: 5px; height: 30px; width: 210px; color: #FFF; padding-top: 10px;font-size: 14px }

.left2 li.hl{background:xxxx; color: #000000; font-size: 14px; margin: 5px; height: 30px; width: 210px; color: #FFF; padding-top: 10px; }

三 .说明

1.代码根据实际需求进行修改

2.<!--截取对应的栏目id。根据实际需求来-->这一部分是截取的url中的一部分进行的比较

3.hl是进行点击后的css样式