javascript 做到鼠标点击不同栏目给一个css
<!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>
<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>
本网声明：海南科技网发布此文仅出于信息分享，并非赞同其观点或证实其描述，不承担侵权行为的连带责任。投资者据此操作，风险自担。版权归原作者所有，如涉版权或来源标注有误，请联系我们删除。本网原创内容未经书面授权，任何单位或个人不得转载和摘编。
猜您喜欢
-
-
帝国cms标签内容页获取时间的方法
帝国cms标签内容页获取时间的方法：<meta property="article:published_time" content="<?=date('c',查看全文>>- 建站经验
海南科技网
-
帝国cms内容页调用所在的专题信息带链接
[e:loop={'select ztid from phome_enewsztinfo where classid='.$navinfor[classid].' and id='.$na查看全文>>- 建站经验
海南科技网
-
帝国WAP内容页如何调用与PC一样的内容newstext
<?=DoWapRepNewstext($r[newstext])?>用了这个字段 会把P标签都给清除<?=$r[newstext]?>试了这个还是查看全文>>- 建站经验
海南科技网
-
- 浅谈帝国cms的分页采集正则及过滤技巧
- 帝国cms标签内容页获取时间的方法
- 帝国cms内容页调用所在的专题信息带链接
- 帝国WAP内容页如何调用与PC一样的内容newstext
- 帝国cms内容页如何调用指定相关栏目下的文章？
- 帝国cms如何给后台左侧终极栏目添加发布文章快速按钮?
- 帝国cms 列表静态和动态分页样式在哪里修改？
- 灵动标签调用栏目最新10条信息自动获取帝国cms表前缀的方法
- 帝国缩略图随机和自动生成并使用id加序号命名防止重复的方法
- 帝国cms获取当前栏目、父栏目ID、名称、别名、链接调用方法