当前a标签样式保持,其余恢复
最近做毕设“基于SSM的购物网站”时,遇到此问题:
最终效果:
实现方法:
利用 JQuery获取当前url所需字符串,与每一个a标签的对应属性比较,当相同时, 颜色突出;不同时,则恢复原色。(这里的url是通过@PathVariable注解动态生成)
代码:
1.JSP页面
<a href="" id="100" name="nvzhuang">女装</a>
<a href="" id="101" name="nanzhuang">男装</a>
<a href="" id="102" name="xiezi">鞋子</a>
<a href="" id="103" name="xiangbao">箱包</a>
2.JS
var url = window.location.href; //获取当前页面的url
var f = url.lastIndexOf('/')+1; //最后一次出现"/"的位置
var type =url.substring(f,url.length) ; //例如 type="nanzhuang"
$("#form11 a").each(function(i,n){
//获取a标签的name属性的值,虽然已被html5淘汰
var name = $(n).attr('name');
//相同赋予红色,不同赋予黑色
if( name == type){
n.style.color="#ff464e";
}else{
n.style.color="black"
}
});
总结
方法较笨,欢迎指正