css - 选项卡导航中的条件 CSS Reactjs

标签 css reactjs

我在 React.js 中有我的自定义选项卡导航。我想使用条件渲染或状态更改来更改事件选项卡的背景颜色。我尝试传递颜色状态,但 CSS 没有任何变化。这是我的代码链接: https://stackblitz.com/edit/reacttabs

请帮忙!

最佳答案

你必须有条件地设置 li 元素的样式

首先为事件标签样式定义一个变量

var active = Object.assign({},tabStyles);
    active.backgroundColor = '#000';

然后在渲染中有条件地调用所需的样式

<li style={this.state.active == '1' ? active  : tabStyles} onClick={() => {this.toggle('1')}}>A</li>
<li style={this.state.active == '2' ? active : tabStyles} onClick={() => {this.toggle('2')}}>B</li>

关于css - 选项卡导航中的条件 CSS Reactjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55994015/

相关文章:

javascript - 如何在 React Native 列表中的某些位置为元素设置不同的样式?

html - 如何让 div 在悬停时覆盖 div?

html - IE7 中的小 CSS 问题

javascript - '高度 : Toggle' on JQuery's 'animate' makes Div keep toggling

css - 如何获取最后一个子 *ngFor 组件列表

reactjs - Msal Azure AD -> 重定向到 azure 登录屏幕

javascript - 从图像中取出alt标签并放入div

javascript - 如何锁定 Leaflet map 中的缩放级别?

reactjs - 仅当两个依赖项发生更改时才运行 Effect Hook

javascript - 如何访问对象数组中的两个单独的图像并将其分配给同一数组中的第三个对象?