我的问题是关于通过另一个类更改类的 CSS。我知道只有当我们尝试更改的元素与所选元素相邻或同级时,我才能更改 CSS。
我的目标是在选择“血腥玛丽”链接时更改标题和选项卡类的背景颜色,但我不知道如何实现。我正在使用 React,我想到它的方式是使用状态。默认值为白色,当血腥玛丽链接处于活动状态时,它会将状态从白色更改为黑色。我还计划更改字体颜色等其他样式,但主要思想保持不变,通过 react 动态更改样式。
我已经将我的代码剥离到基础知识,使其看起来更干净。如果您能提供一些帮助,将不胜感激。
class Header extends React.Component {
render () {
return(
<div>
<div className='header'>
<li className='tabs'><NavLink className='style'
activeClassName='selected'>Home</NavLink></li>
<li className='tabs'><NavLink className='style'
activeClassName='selected'>Team</NavLink></li>
<div className='dropdown'>
<div className='tabs'><NavLink className='style projectstab'
activeClassName='selected'>Projects</NavLink></div>
<div className='dropdown-content'>
<a>
<p className='dropdown-li'>
</p>
<NavLink activeClassName='bloodyselected'>
Bloody Mary
</NavLink>
</a>
</div>
</div>
<li className='tabs'><NavLink className='style'
activeClassName='selected'>Contact Us</NavLink></li>
</div>
)
}
}