我有一些按鈕，當我點擊一個按鈕時，我希望通過更改按鈕的背景顏色來突出顯示它，直到點擊任何其他按鈕
function clickedtime(e) {
var time = e.target.value;
settime(time);
}
<TabPanel className="tabcss" style={styles.tabpannel}>
<button
onClick={clickedtime}
value="9:00am"
style={styles.button}
>
9:00am
</button>
<button
onClick={clickedtime}
value="9:30am"
style={styles.button}
>
9:30am
</button>
....
</TabPanel>
uj5u.com熱心網友回復：
使用事件處理程式和 useState 設定顏色 onClick 像這樣
const[btn,setBtn]=useState([0,0]);//mean two button
const[sel,setSel]=useState(0);//mean 0 button is selected by default
function clickedtime(e,index) {
var time = e.target.value;
settime(time);
setSel(index)//selected btn is 0in this case
}
現在為您的標簽面板將樣式更改為 style={{backgroundColor:col}} 以及像我提到的那樣更改標簽面板樣式
<TabPanel className="tabcss" style={styles.tabpannel}>
btn.map((item,index)=>{
sel==index?
<button
onClick={(index)=>{clickedtime(index)}}
value="9:00am"
style={{backgroundColor:"red"}}
>
9:00am
</button>
:
<button
onClick={clickedtime}
value="9:00am"
style={{backgroundColor:"white"}}
>
9:00am
</button>
}
....
</TabPanel>
uj5u.com熱心網友回復：
您可以將所有按鈕添加到一個類中，向它們添加事件偵聽器，然后在觸發 click 事件時將另一個名為“clicked”的類附加到它們。
var buttons = document.getElementsByClassName("time-button");
var click_listener = function(event) {
//console.log("clicked " event.target);
for (var i = 0; i < buttons.length; i ) {
buttons[i].classList.remove("clicked");
}
event.target.classList.add("clicked");
};
for (var i = 0; i < buttons.length; i ) {
buttons[i].addEventListener("click", click_listener, false);
}.clicked {
background-color: orange;
}<button class="time-button">9:30 am</button>
<button class="time-button">9:00 am</button>
<button class="time-button">8:30 am</button>
<button class="time-button">8:00 am</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/362812.html
標籤：javascript html css 反应