KPC
Kevin Powell - Community•3y ago
Aditya Kirad

need help in highlighting an div when it clicked

hey folks this is my jsx 
<Box sx={{display: 'flex', border: '0px solid #313442', borderBottomWidth: '1px'}}>
  <Box className={styles.pluginButtons}>All Plugins</Box>
  <Box className={styles.pluginButtons}>Popular Plugins</Box>
  <Box className={styles.pluginButtons}>Server Management</Box>
  <Box className={styles.pluginButtons}>Utilities</Box>
  <Box className={styles.pluginButtons}>Social Alerts</Box>
  <Box className={styles.pluginButtons}>Engagement & Fun</Box>
</Box>
<Box sx={{display: 'flex', border: '0px solid #313442', borderBottomWidth: '1px'}}>
  <Box className={styles.pluginButtons}>All Plugins</Box>
  <Box className={styles.pluginButtons}>Popular Plugins</Box>
  <Box className={styles.pluginButtons}>Server Management</Box>
  <Box className={styles.pluginButtons}>Utilities</Box>
  <Box className={styles.pluginButtons}>Social Alerts</Box>
  <Box className={styles.pluginButtons}>Engagement & Fun</Box>
</Box>
and here is the css 
.pluginButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arvo, serif;
    font-size: 1.6rem;
    cursor: pointer;
    color: #656a83;
    white-space: nowrap;
    padding: 2rem;
}

.pluginButtons:hover {
    color: white;
}
.pluginButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arvo, serif;
    font-size: 1.6rem;
    cursor: pointer;
    color: #656a83;
    white-space: nowrap;
    padding: 2rem;
}

.pluginButtons:hover {
    color: white;
}
now I want that when one of the div is clicked the color of text change for the clicked div like in the attached photo
2 Replies
Jochem
Jochem•3y ago
no clue how that works in JSX, but you'll have to add a class to the currently active button. Are those navigation links, or filters? In another templating system, I'd add a conditional class comparing the application state (so either the active filter or the currently active route) to the value for that link, and if true, add an active class then in css you can have .pluginButtons.active { color: white; }
b1mind
b1mind•3y ago
https://benmyers.dev/blog/semantic-selectors/ SideNote: you can use aria-current="page" then style with a attribute selector and have a active class for free.

Did you find this page helpful?