点击栏目后变色

鼠标点击后栏目变色,需要做JS做判断,根据ID值,还有网站的访问地址,||代表或,两个域名访问时都会有相同的效果。方法如下:

<title>点击栏目后变色</title>
<link  href="./img/index.css" type="text/css" rel="stylesheet" />
</head>
<body bgcolor="#111">
<!--导航-->
<div id="header">
<div><img src="img/banner.png" alt=""></div>
<ul id="ServiceListTable">
<li><a href="#"></a></li>
<li id="present1"><a href="1.htm">艺成概况</a></li>
<li id="present2"><a href="2.htm">新闻通知</a></li>
<li id="present3"><a href="3.htm">课程设置</a></li>
<li id="present4"><a href="#">联系我们</a></li>
</ul>
<div></div>
</div>
<script>
var url=window.location.href;
if(url=="http://localhost/1.htm"||url=="http://127.0.0.1/1.htm"){
present1.style.background="#666666";
var aa=present1.getElementsByTagName("a");
aa[0].style.color="#ffffff";
}else if(url=="http://localhost/2.htm"||url=="http://127.0.0.1/2.htm"){
present2.style.background="#666666";
var aa=present2.getElementsByTagName("a");
aa[0].style.color="#ffffff";
}else if(url=="http://localhost/3.htm"||url=="http://127.0.0.1/3.htm"){
present3.style.background="#666666";
var aa=present3.getElementsByTagName("a");
aa[0].style.color="#ffffff";
var aa=subnav.getElementsByTagName("a");
aa[0].style.background="#990000";
aa[0].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/shiziduiwu/"||url=="http://www.91yicheng.cn/a/shiziduiwu/"){
present4.style.background="#666666";
var aa=present4.getElementsByTagName("a");
aa[0].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/jiaoxuehuanjing/20130925/19.html"||url=="http://www.91yicheng.cn/a/jiaoxuehuanjing/20130925/19.html"){
present5.style.background="#666666";
var aa=present5.getElementsByTagName("a");
aa[0].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/lianxiwomen/20130920/2.html"||url=="http://www.91yicheng.cn/a/lianxiwomen/20130920/2.html"){
present6.style.background="#666666";
var aa=present6.getElementsByTagName("a");
aa[0].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/hezuohuoban/2013/0927/30.html"||url=="http://www.91yicheng.cn/a/hezuohuoban/2013/0927/30.html"){
present7.style.background="#666666";
var aa=present7.getElementsByTagName("a");
aa[0].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/kechengshezhi/20131021/35.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20131021/35.html"){
present3.style.background="#666666";
var aa=present3.getElementsByTagName("a");
aa[0].style.color="#ffffff";
var aa=subnav.getElementsByTagName("a");
aa[2].style.background="#990000";
aa[2].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/kechengshezhi/20130921/9.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20130921/9.html"){
present3.style.background="#666666";
var aa=present3.getElementsByTagName("a");
aa[0].style.color="#ffffff";
var aa=subnav.getElementsByTagName("a");
aa[1].style.background="#990000";
aa[1].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/kechengshezhi/20130921/10.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20130921/10.html"){
present3.style.background="#666666";
var aa=present3.getElementsByTagName("a");
aa[0].style.color="#ffffff";
var aa=subnav.getElementsByTagName("a");
aa[2].style.background="#990000";
aa[2].style.color="#ffffff";
}else if(url=="http://www.91yicheng.com/a/kechengshezhi/20131021/36.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20131021/36.html"){
var aa=subnav.getElementsByTagName("a");
aa[3].style.background="#990000";
aa[3].style.color="#ffffff";
}
</script>

效果如下:

QQ20131119165249

效果下载:点击栏目后变色

此效果转自本公司完成的项目:http://www.91yicheng.cn/

 

本文固定链接: http://blog.wmphp.com/780.html | 速光网络博客

该日志由 admin 于2013年11月19日发表在 Javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 点击栏目后变色 | 速光网络博客

点击栏目后变色:目前有1 条留言

  1. 沙发
    moyan:

    😛 😛 😛 😛 😛 😛

    2013-11-19 04:48 [回复]

发表评论


快捷键:Ctrl+Enter