i have some buttons when ever i click on a button i want it heighlighted by changing the background colur of the button until any other button is cliked
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>
Use event handler and useState for setting color onClick like this
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
}
now for your tab panel change style to style={{backgroundColor:col}} aslo change tabpanel styling like i mention
<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>
You can add all buttons to a class, add event listener to them and then have another class called "clicked" attached to them when the click event is fired.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.