效果:
代码:
复制代码代码如下:
<หัว runat="เซิร์ฟเวอร์">
<title></title>
<style type="text/css">
#สีแดง
-
ความกว้าง: 260px;
ความสูง: 200px;
พื้นหลัง: #FF0000;
จอแสดงผล: ไม่มี;
-
#สีเขียว
-
ความกว้าง: 260px;
ความสูง: 200px;
พื้นหลัง: #00FF00;
จอแสดงผล: ไม่มี;
-
#สีเหลือง
-
ความกว้าง: 260px;
ความสูง: 200px;
พื้นหลัง: #FFFF00;
จอแสดงผล: ไม่มี;
-
#สีฟ้า
-
ความกว้าง: 260px;
ความสูง: 200px;
พื้นหลัง: #0000FF;
จอแสดงผล: ไม่มี;
-
</สไตล์>
<script type="text/javascript">
window.onload = ฟังก์ชั่น () {
var btn = document.getElementsByTagName('อินพุต');
var div = document.getElementsByTagName('div');
สำหรับ (var i = 0; i < btn.length; i++) {
btn[i].ดัชนี = ฉัน;
btn[i].onclick = ฟังก์ชั่น () {
สำหรับ (var i = 0; i < btn.length; i++) {
btn[i].style.พื้นหลัง = '';
-
สวิตช์ (this.value) {
กรณี '红色': this.style.พื้นหลัง = '#FF0000';
หยุดพัก;
case '绿色': this.style.พื้นหลัง = '#00FF00';
หยุดพัก;
case '黄色': this.style.พื้นหลัง = '#FFFF00';
หยุดพัก;
กรณี '蓝色': this.style.พื้นหลัง = '#0000FF';
หยุดพัก;
-
สำหรับ (var i = 0; i < btn.length; i++) {
div[i].style.display = '';
-
div[this.index].style.display = 'บล็อก';
-
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<input type="button" id="btn1" value="红色" style="สีพื้นหลัง: #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="สีเขียว">
</div>
<div id="สีเหลือง">
</div>
<div id="สีน้ำเงิน">
</div>
</ร่างกาย>