您的位置:海南科技网首页 > 建站经验 > 正文

javascript 做到鼠标点击不同栏目给一个css

2018-05-02 22:39:16 来源:海南科技网 繁体中文 关闭 收藏 打印 复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover变色</title>
<style>
.cube { width: 100px; text-align: center; line-height: 24px; height: 24px; border: 0px solid #CCC; margin: 10px; cursor: pointer; }
</style>
<script>
function exec() {
var lastIndex = 0;
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; ++i) {
(function(i) {
divs[i].onclick = function() {
divs[lastIndex].style.backgroundColor = "#FFF";
divs[lastIndex].style.fontWeight = "normal";
lastIndex = i;
divs[i].style.backgroundColor = "#CCC";
divs[i].style.fontWeight = "bold";
}
})(i);
}
}
</script>
</head>
<body onload="exec()">
<div class="cube">第一块</div>
<div class="cube">第二块</div>
<div class="cube">第三块</div>
<div class="cube">第四块</div>
<div class="cube">第五块</div>
</body>
</html>

  (来源:海南科技网)

版权声明:
1.本站登载此文仅出于传递更多信息,并不意味着赞同其观点或证实其描述,不承担侵权行为的连带责任。
2.如本网信息涉及版权等问题,请于发布起15个工作日内发送邮件与本网联系,我们将及时删除处理。

相关资讯:

版权声明:
1.本站登载此文仅出于传递更多信息,并不意味着赞同其观点或证实其描述,不承担侵权行为的连带责任。
2.如本网信息涉及版权等问题,请于发布起15个工作日内发送邮件与本网联系,我们将及时删除处理。