有没有办法单独定位数组中的每个图像，以便在单击时突出显示它们？答案

【问题标题】：is there a way to target each image from the array individually in order to make them highlight when clicked?有没有办法单独定位数组中的每个图像，以便在单击时突出显示它们？
【发布时间】：2022-08-20 15:01:58
【问题描述】：

每当用户单击它们时，我都会尝试以某种方式突出显示徽标，以便他们确切地知道他们在哪张卡上活跃。我不知道该怎么做。任何建议都将不胜感激！


const professions = [
 {
   circular: <CircularProgressbar value= \"99\" text={`99%`} 
   styles={buildStyles({
    // Whether to use rounded or flat corners on the ends - can use \'butt\' or \'round\'
    strokeLinecap: \'butt\',
    // Text size
    textSize: \'16px\',
    // How long animation takes to go from one percentage to another, in seconds
    pathTransitionDuration: 1.5,
    // Colors
    pathColor: `rgba(16, 38, 71, ${99 / 100})`,
    textColor: \'#102647\',
    trailColor: \'#e0e0eb\',
    backgroundColor: \'#3e98c7\',
  })}
  /> ,
   git:<FaGitAlt/>,
   industrycon: <IoRocketSharp alt=\"Space Rocket\"/> ,
   key: \"card1\",
   project:\"SAFE ZONE\",
   icon: <FaRegEye alt=\"ComNatural Language processing-logo\" />,
   percentage: 99,
   specialty: \"CV - DATA ANALYTICS \",
   industry:\" Gases Clinicos\",
   summary:\"Compliance del 99% de normas sanitarias para operación en pandemia , identifiacando dist. social, aforo y mascarilla.\",
   logo: <img className=\"logus Mediumsquare\" src={imgrep(1)} alt=\"altofem\" />
 },


 { 
   circular: <CircularProgressbar value= \"40\" text={`40%`} 
   styles={buildStyles({
    // Whether to use rounded or flat corners on the ends - can use \'butt\' or \'round\'
    strokeLinecap: \'butt\',
    // Text size
    textSize: \'16px\',
    // How long animation takes to go from one percentage to another, in seconds
    pathTransitionDuration: 1.5,
    // Colors
    pathColor: `rgba(16, 38, 71, ${40 / 100})`,
    textColor: \'#102647\',
    trailColor: \'#e0e0eb\',
    backgroundColor: \'#3e98c7\',
  })}
  /> ,
   key: \"card2\",
   industrycon: <IoRocketSharp alt=\"Space Rocket\"/>,
   git:<FaGitAlt/>,
   project:\"Automatización EEPP-forecasting\",
   icon: <GiProcessor alt=\"Natural Language processing-logo\"/>,
   specialty: \"NLP- Data analytics \",
   industry: \"Constructora Inmobiliaria\",
   summary: \"Automatización en estados de pago con NLP\",
   logo: <img className=\"logus Biground\" src={imgrep(2)} alt=\"vimac\" />,
 },


 {
   circular: <CircularProgressbar value= \"96\" text={`96%`} 
   styles={buildStyles({
    // Whether to use rounded or flat corners on the ends - can use \'butt\' or \'round\'
    strokeLinecap: \'butt\',
    // Text size
    textSize: \'16px\',
    // How long animation takes to go from one nother, in seconds
    pathTransitionDuration: 1.5,
    // Colors
    pathColor: `rgba(16, 38, 71, ${96 / 100})`,
    textColor: \'#102647\',
    trailColor: \'#e0e0eb\',
    backgroundColor: \'#3e98c7\',
  })}
  /> ,
   key: \"card3\",
   industrycon: <IoRocketSharp alt=\"Space Rocket\"/>,
   git:<FaGitAlt/>,
   project:\"Diagnoticos de CV\",
   icon:<BsFileEarmarkText alt=\"Text Icon\"/> ,
   specialty: \"NLP\",
   industry: \"Recursos Humanos\",
   summary:\"Un Ahorro del 96% del tiempo total gastado en diagnósticos de CV\",
   logo: <img  className=\"logus Mediumsquare\" src={imgrep(3)} alt=\"peopleparnerts\" />,
 }
];

const [myProfession, setMyProfession] = useState(\"\");
const[seeF, setSeef]= useState(true);
const[stepOn, setStepOn]= useState(false);


//function to set showf to false, so it wont be rederized
function showF(){
 if(seeF)
 {
  setSeef(false)
  setStepOn(true)
 }
}

//function to target the logos
function light(){
console.log(\"clicked\");  
}

return (

  <>
   {/* INFORMATION CARDS */}
   <Container> 
     <LeftSide>
       <Bottom>
        {seeF ? <FrontCard/> : null}
         {(professions) && (
       <Cards 
       circular={myProfession.circular}
       project={myProfession.project}
       icon={myProfession.icon}
       percentage={myProfession.percentage} 
       specialty= {myProfession.specialty}
       industry={myProfession.industry}
       summary={myProfession.summary}
       git={myProfession.git}
       industrycon={myProfession.industrycon}
        />       
         )}    
         
         {professions.map((profession) => ( 
           <info
           circular={profession.circular}
           project={profession.project}
           icon={profession.icon}
           git={profession.git}
           industrycon={profession.industrycon}
           percentage={profession.percentage}
           specialty={profession.specialty}
           industry={profession.industry}
           summary={profession.summary}
           className={profession.logo.props.className}
           src={profession.logo.props.src}
           onMouseEnter={() => setMyProfession(profession.logo.props.alt)}/>
         ))}
       </Bottom>
     </LeftSide>
     {/* HOVERING LOGOS */}
     <RightSide onClick= {()=> showF()}>
       <h2> Nuestros Casos de Exito </h2>
       <br />
       <Buttons>
         {professions.map((profession) => (
           <>
             <img 
               type=\"img\"
               key={profession}
               id={profession.logo.props.id}
               src={profession.logo.props.src}
               className={profession.logo.props.className}
               onClick={() => {setMyProfession(profession); light();}}
             ></img>
           </>
         ))}
       </Buttons>
     </RightSide>
   </Container>
 </>
);
};

export default ShowAndHide;

这就是它现在的样子，但是没有人能够知道现在呈现的是哪个公司的信息

标签： javascript css arrays reactjs

【解决方案1】：

您可以将链接显示为标签并检查当前是否存在，然后在 CSS 的帮助下显示活动状态，您现在可以这样做 -

a:active {
  background: red;  //whatever you want to do with the logo
}

【讨论】：