三个按钮和nav均用ul实现,float:left调整为横向。效果是nav和body的background-color改变。调用了不同的外部css文件实现。<link href="green.css" rel="stylesheet" type="text/css">
link的href将被script修改。
先写style初始化。
script部分:
<script type="text/javascript">
window.onload= function()
{
var oLink = document.getElementsByTagName("link")[0]; //oLink获取了link的NodeList的第一项(页面内第一个link)
var oSkin = document.getElementById("skin").getElementsByTagName("li"); //oSkin获取了按钮列表skin中的所有按钮li组成的NodeList的数组。
for(var i = 0;i < oSkin.length;i++) //用for循环遍历每一个按钮
{
oSkin[i].onclick = function() //onclick事件绑在按钮数组oSkin(的每一项)上
{
for(var p in oSkin) oSkin[p].className = ""; //for in迭代oSkin对象的每一项,修改每一项的className都变成空
this.className = "current"; //紧接着把当前的那个按钮li的className改成"current",没有实际效果,但onclick后代码内可以清晰呈现出当前click的是哪一个li,是哪一种颜色。 (这两行也可以不要)
oLink['href'] = this.id + ".css";} //方括号以属性名href调用link的href属性,修改成当前按钮调用的的id.css,改变了调用的外部css文件,进而改变了style。
}
};//onload阶段完成了每一个按钮的onclick设定
</script>