cccylove

死生契阔,与子成说。执子之手,与子偕老

当前导航切换样式实现方法

cc2012-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 方法

Nav_demo1_CSS.rar

 

2.JS设置cookie方法

Nav_demo_JS_cookie.rar

感谢阅读!发表下看法?

留言


蓝瞳视觉|网格传媒/zblog主题|西西用户体验设计|Zblog