JavaScript点击设置背景颜色的选项卡代码

快乐打工仔 分类:实例代码

JavaScript点击设置背景颜色的选项卡代码属于前端实例代码,有关更多实例代码大家可以查看

本章节分享的实例代码也是一个选项卡,只不过能够设置背景颜色而已。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#red {
  width:260px;
  height:200px;
  background:#FF0000;
  display:none;
}
#green {
  width:260px;
  height:200px;
  background:#00FF00;
  display:none;
}
#yellow {
  width:260px;
  height:200px;
  background:#FFFF00;
  display:none;
}
#blue {
  width:260px;
  height:200px;
  background:#0000FF;
  display:none;
}
</style>
<script type="text/javascript">
window.onload=function() {
  var btn=document.getElementsByTagName('input');
  var div=document.getElementsByTagName('div');
  for (var i=0;i<btn.length;i++) {
    btn[i].index=i;
    btn[i].onclick=function() {
      for (var i=0;i<btn.length;i++) {
        btn[i].style.background = '';
      }
      switch (this.value) {
        case '红色': 
          this.style.background = '#FF0000';
          break;
        case '绿色': 
          this.style.background = '#00FF00';
          break;
        case '黄色': 
          this.style.background = '#FFFF00';
          break;
        case '蓝色': 
          this.style.background = '#0000FF';
          break;
      }
      for (var i=0;i<btn.length;i++) {
        div[i].style.display = '';
      }
      div[this.index].style.display = 'block';
    }
  }
};
</script>
</head>
<body>
<input type="button" id="btn1" value="红色" style="background-color: #FF0000" />
<input type="button" id="btn2" value="绿色" />
<input type="button" id="btn3" value="黄色" />
<input type="button" id="btn4" value="蓝色" />
<div id="red" style="display: block;"> </div>
<div id="green"> </div>
<div id="yellow"> </div>
<div id="blue"> </div>
</body>
</html>

JavaScript点击设置背景颜色的选项卡代码,这样的场景在实际项目中还是用的比较多的,关于JavaScript点击设置背景颜色的选项卡代码就介绍到这了。

回复

我来回复
  • 暂无回复内容