1

私は JavaScript が初めてで、JavaScript を使用して 2 つの動的 div を作成しました。最初の div をクリックすると、アクティブになります。クリックしたときにdivの背景色を変更したいのですが、それがアクティブになるはずです。2 番目の div をクリックすると、2 番目の 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 に答える