当前导航切换样式实现方法
cc于2012-06-21 02:38:13
当前导航切换样式的几种实现方式：
一，前端开发人员：
1.纯CSS
2.CSS+JS
二，程序开发人员：
1.JS
2.纯程序
-------------------------------------------------简洁的界线-------------------------------------------------
我是做前端的，所以只说一，前端开发人员的方法。程序员见谅。
1.纯CSS
【实现思路】通过CSS的选择符判断是否为当前页，来切换导航样式。
【实现方法】我们为每个页面的body、导航链接分别设定不同的CSS选择符标志，这样就可以判断是否为当前页了。
【实现代码】
导航：
<ul>
<li><a id="pageOne" href="pageone.html">第一页</a></li>
<li><a id="pageTwo" href="pagetwo.html">第二页</a></li>
</ul>
分页面截取代码：
pageone.html
---------------------------------
<body id="page1">
<p>这是第一页</p>
</body>
pagetwo.html
---------------------------------
<body id="page2">
<p>这是第一页</p>
</body>
CSS代码：
a{ color:blue; }
#page1 #pageOne,#page2 #pageTwo { color:red; }
/*上一行解释：选择id为page1的页面，再选择id为pageOne的导航增加样式效果，这样只有在pageone.html的页面时，才会给pageOne增加样式*/
优点：纯CSS，方便，防刷新。
缺点：需要每个导航所链接的页面有独立的body，不适合模块式开发的网页。
2.CSS+JS
【实现思路】通过JS为当前页设定唯一的cookie，读取到该cookie，则增加切换样式，未读到则清楚切换样式。
【实现方法】载入页面后，通过JS写cookie，值为本页URL。然后为本页面相应导航增加切换样式，并清除其它导航切换样式。
【实现代码】
导航：
<ul id="nav">
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
</ul>
CSS代码：
a{ color:blue; }
.selected { color:red; }
JS代码（需要放在body后，也就是需页面载入后，再执行JS）：
function addCookie(objName,objValue,objHours){//添加cookie
var str = objName + "=" + escape(objValue);
if(objHours > 0){//为0时不设定过期时间，浏览器关闭时cookie自动消失
var date = new Date();
var ms = objHours*3600*1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toGMTString();
}
document.cookie = str;
}
function getCookie(objName){//获取指定名称的cookie的值
var arrStr = document.cookie.split("; ");
for(var i = 0;i < arrStr.length;i ++){
var temp = arrStr[i].split("=");
if(temp[0] == objName) return unescape(temp[1]);
}
}
function delCookie(name){//为了删除指定名称的cookie，可以将其过期时间设定为一个过去的时间
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toGMTString();
}
/*关键操作部分*/
var navUl = document.getElementById("nav"); //获取导航DOM
var navLiTeam = navUl.getElementsByTagName("li"); //获取li的数组
for(var i = 0;i< navLiTeam.length; i++){ //循环对每个导航操作
var temp = navLiTeam.item(i).getElementsByTagName("a").item(0); //获取导航链接，有其它方法，这里写的有点垃圾
temp.className = ""; //由于JS是页面载入后执行，这里将清楚所有导航的样式（清除class类名）
var cookieObj = getCookie("nav"); //取cookie
if(cookieObj == temp){ //如果当前导航的链接为cookie中存储的链接（A）
temp.className = "selected"; //高置该导航样式为切换样式
}
temp.onclick = function(){ //监听导航链接的点击事件
delCookie("nav"); //点击则清除cookie
addCookie("nav",this,30); //追加所点击导航的URL为cookie值，（对应上面代码中的(A).为下次判断做准备）
}
}
PS：语文不好，如果表达的不清楚，想交流的朋友可以给我留言。
Demo下载：
1.纯CSS 方法
2.JS设置cookie方法
感谢阅读！发表下看法？