<!DOCTYPE html>
<html>
<head>
<title>html5</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body {color:#ccc;}
.isbg {color: #FFF;}
</style>
<link rel="stylesheet" href="red.css">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!-- javascript -->
<script type="text/javascript">
window.onload = function(){
var oLink = document.getElementsByTagName("link")[0]; //获取链接文件标签
var oBg = document.getElementsByTagName("div")[0].getElementsByTagName("li"); //控制换肤的标签列表所有元素
for(var i = 0; i < oBg.length; i++){ //循环列表，列出索引i
oBg[i].onclick = function(){ //点击事件
for(var p in oBg) //内部循环
oBg[p].className = ""; //取消所有class
this.className = "isbg"; //当前li加上class
oLink['href'] = this.id + ".css"; //把当前id+.css赋值给link标签的href属性
}
}
}
</script>
<!-- jQuery -->
<script type="text/javascript">
$(function(){
var oLink = $("link");
var oBg = $("div li");
$(oBg).click(function(){
var oId = $(this).attr("id");
$(this).addClass("isbg").siblings().removeClass("isbg");
$(oLink).attr('href',oId + '.css');
});
})
</script>
<!-- 为什么javascript要用循环输出i，用onclick来控制点击跟jQuery中的click有什么不同。
jQuery中的click会触发‘每一个’匹配元素的click事件
javascript getElementsByTagName("li")选中的是'所有'符合标准的元素
javascript中的onclick是指“当对象被点击时触发事件”，如果不用for循环出i来索引li，那么，点击时触发的是所有li的onclick事件，this将无法指到正确的li
-->
</head>
<body>
<div>
<li id="red" class="isbg">红色</li>
<li id="black">黑色</li>
</div>
</body>
</html>
浙公网安备 33010602011771号