1

我是 JavaScript 新手,我使用 JavaScript 创建了两个动态 div。当我单击第一个 div 时,它变为活动状态。我希望在单击它时更改 div 背景颜色,然后它应该变为活动状态。当我点击第二个 div 时,第二个 div 应该改变背景颜色,第一个 div 取回原来的颜色。

当我同时单击时,我想更改 btnCage 和 btnMice 的 bgcolor。

var buttonDiv= document.createElement('div');

var btnCage = document.createElement('div');
btnCage.id = 'btnCage';
//btnCage.className = 'active';
btnCage.innerHTML = 'By Cages';
buttonDiv.appendChild(btnCage);
btnCage.onclick = function() {
     getMonthlyCensusCages()
}

var btnMice = document.createElement('div');
btnMice.id = 'btnMice';
//btnMice.className = 'active';
btnMice.innerHTML = 'By Mice';
buttonDiv.appendChild(btnMice);
btnMice.onclick = function() {
     getMonthlyCensus()
} 

请帮我

4

2 回答 2

3

你可以这样做:

btnMice.onclick = function() {
   this.style.backgroundColor = '#f00';
   btnCage.style.backgroundColor = '#ccc';
}; 

btnCage.onclick = function() {
   this.style.backgroundColor = '#f00';
   btnMice.style.backgroundColor = '#ccc';
};
于 2013-03-14T11:40:26.980 回答
0
var buttonDiv= document.createElement('div');

var btnCage = document.createElement('div');
btnCage.id = 'btnCage';
//btnCage.className = 'active';
btnCage.innerHTML = 'By Cages';
buttonDiv.appendChild(btnCage);

var btnMice = document.createElement('div');
btnMice.id = 'btnMice';
//btnMice.className = 'active';
btnMice.innerHTML = 'By Mice';
buttonDiv.appendChild(btnMice);

// change style or change className
btnCage.onclick = function() {
     this.style.backgroundColor = 'red';
     btnMice.style.backgroundColor = 'black';
     getMonthlyCensusCages();
}

btnMice.onclick = function() {
     this.style.backgroundColor = 'red';
     btnCage.style.backgroundColor = 'black';
     getMonthlyCensus();
}
于 2013-03-14T11:35:25.643 回答