静态页面用js实现导航栏变换背景

系统管理员 2022-08-20 08:19 169阅读 0赞

注：此种方法适用于五种情况  
1. [http://www.baidu.com][http_www.baidu.com]  
2. [http://www.baidu.com/][http_www.baidu.com]  
3.[http://www.baidu.com/index.html ][http_www.baidu.com_index.html];  
4.[http://www.baidu.com/newsinfo\_123.html][http_www.baidu.com_newsinfo_123.html]  
5. [http://www.baidu.com/admin/index123.html][http_www.baidu.com_admin_index123.html]

</ul>  
  
<style type="text/css">

/\*menu开始\*/

.menu\{ height:41px; background:\#007CE1;\}

.menu ul li\{ width:98px; float:left; text-align:center; height:41px; line-height:41px!important; line-height:41px;\}

.menu ul li a\{ display:block; color:\#FFF; font-size:16px; font-weight:bold;\}

.menu ul li:hover\{background:\#ffa903;\}

/\*menu结束\*/     
</style>

var thisUrl=window.location.pathname; //获取当前页面url中域名后的值

var gangIndex=thisUrl.lastIndexOf("/");//获取最后一个“/”的下标

var dianIndex=thisUrl.lastIndexOf(".");//获取最后一个“.”的下标

var subUrl=thisUrl.substring(gangIndex+1,dianIndex);//取最后一个“/”和最后一个“.”之间的内容

//alert(gangIndex);

//alert(dianIndex);

//alert(subUrl);

document.getElementById("index").style.backgroundColor="\#007CE1";//定id为index的背景颜色为蓝色（消除黄色）

if(thisUrl=="")\{   // 当直接用域名访问（浏览器默认不带"/"）时

document.getElementById("index").style.backgroundColor="\#ffa903";//定id为index的背景颜色为黄色（消除蓝色）

if(gangIndex==0&&dianIndex<gangIndex)\{ // 当直接用域名访问（浏览器默认生成"/"）时, [http://www.baidu.com/][http_www.baidu.com]

document.getElementById("index").style.backgroundColor="\#ffa903";// 定id为index的背景颜色为黄色（背景颜色）

\}else if(subUrl.indexOf("newsinfo") >= 0 )\{ // 当页面为newsinfo页的时

document.getElementById("index").style.backgroundColor="\#ffa903";// 定id为index的背景颜色为黄色（背景颜色）

\}else\{

document.getElementById(subUrl).style.backgroundColor="\#ffa903";// 根据获取的subUrl，修改相同id的背景颜色

</script>

[http_www.baidu.com]: http://www.baidu.com/
[http_www.baidu.com_index.html]: http://www.baidu.com/index.html%C2%A0
[http_www.baidu.com_newsinfo_123.html]: http://www.baidu.com/newsinfo_123.html
[http_www.baidu.com_admin_index123.html]: http://www.baidu.com/admin/index123.html