网站导航栏点击变色并跳转页面导航栏颜色如何固定在相对应栏目位置

网站任何跳转导航栏变色都固定调到同一位置

需求代码参考如下:

<script>   $(function () {       var navLi = $(".HouseDetails_nav li")       var windowUrl = location.protocol + '//' + location.hostname + location.pathname;       navLi.each(function () {           var t = $(this).find("a").attr("href");           if(t==windowUrl){               $(this).addClass("on").siblings().removeClass("on")
}
});   });

</script>

var windowUrl = location.protocol + '//' + location.hostname + location.pathname;  //获取当前URL链接  (打印)获取比较明确的链接地址

var windowUrl = window.location.href;  //获取当前URL链接

知识延展:

    Javascript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、FireFox等)支持。

    JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。

参考资料

经验.百度[引用时间2018-1-15]

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-08-25
<style>
.on{background:red;}
</style>
<script>
$(function(){
var navLi=$('li') //此处填写你的导航html对象
var windowUrl=window.location.href; //获取当前url链接
navLi.each(function(){
var t=$(this).find('a').attr('href');
if(t==windowUrl){
$(this).addClass('on');  //添加当前位置样式 
}
})
})
</script>

你放上去试试

追问

放上去网站没反应

追答

要引入jq 文件才行,还有上面的$('li') 这里的 要改成你自己的。

本回答被提问者采纳
相似回答