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样式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值