激活时如何使li改变颜色？

Question

我正在我的网站上创建一个常见问题解答部分，您应该可以通过单击其中一个部分主题来过滤问题。 I have this functioning however what I want is for when one of the section titles is selected, that specific title should change from being red to black and underlined.当鼠标被按住时，它可以工作，但一旦我放开它，它就会变回来。当某个部分处于活动状态时，如何让它保持这种状态？

CSS：

#portfolio .portfolio-list .nav li {
 margin: 0 40px 0 0;
 float: left;
 color: #C42B32;
 line-height: 16px;
 cursor: pointer;
 font-size: 20px;
 font-weight: 600 ! important;
 font-family: 'Assistant', sans-serif ! important;
 letter-spacing: 0.02em;
 -moz-transition: all 0.5s ease-in-out 0s;
 -ms-transition: all 0.5s ease-in-out 0s;
 -o-transition: all 0.5s ease-in-out 0s;
 -webkit-transition: all 0.5s ease-in-out 0s;
 transition: all 0.5s ease-in-out 0s;
 text-transform: uppercase;
}

#portfolio .portfolio-list .nav li:hover, #portfolio .portfolio-list .nav li.filter-active {
 color: #000000;
 -moz-transition: all 0.5s ease-in-out 0s;
 -ms-transition: all 0.5s ease-in-out 0s;
 -o-transition: all 0.5s ease-in-out 0s;
 -webkit-transition: all 0.5s ease-in-out 0s;
 transition: all 0.5s ease-in-out 0s; }

#portfolio .portfolio-list .nav li:active, li:focus, li:focus-within {
color: #000000 ! important;
text-decoration: underline;
}

标题：

import React from 'react';

export default class Filters extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="portfolio-list">
                <ul className="nav list-unstyled" id="portfolio-flters">
                    <li className="faqnav" data-item="all" onClick={this.props.filter}>All</li>
                    <li className="faqnav" data-item="general" onClick={this.props.filter}>General</li>
                    <li className="faqnav" data-item="stats" onClick={this.props.filter}>Stats</li>
                    <li className="faqnav" data-item="account" onClick={this.props.filter}>Account</li>
                    <li className="faqnav" data-item="social" onClick={this.props.filter}>Social Media</li>
                </ul>
            </div>
        );
    }
}[![Screenshot][1]][1]

Answer 1

尝试以下方法： 从“反应”导入反应；

export default class Filters extends React.Component {

    constructor(props) {
        super(props);
    }

    state = {
        activeFilter: 0,
    }

    render() {
        return (
            <div className="portfolio-list">
                <ul className="nav list-unstyled" id="portfolio-flters">
                    <li className={`faqnav ${this.state.activeFilter === 1 ? 'active': ''}`}  data-item="all" onClick={(e) => this.filter(e, 1)}>All</li>
                    <li className={`faqnav ${this.state.activeFilter === 2 ? 'active': ''}`}  data-item="general" onClick={(e) => this.filter(e, 2)}>General</li>
                    <li className={`faqnav ${this.state.activeFilter === 3 ? 'active': ''}`}  data-item="stats" onClick={(e) => this.filter(e, 3)}>Stats</li>
                    <li className={`faqnav ${this.state.activeFilter === 4 ? 'active': ''}`}  data-item="account" onClick={(e) => this.filter(e, 4)}>Account</li>
                    <li className={`faqnav ${this.state.activeFilter === 5 ? 'active': ''}`}  data-item="social" onClick={(e) => this.filter(e, 5)}>Social Media</li>
                </ul>
            </div>
        );
    }

    filter = (e, filterId) => {
        this.setState({
            activeFilter: filterId,
        });
        this.props.filter(e);
    }
}

CSS：

.faqnav.active {
    color: #000;
    text-decoration: underline;
}

说明： 添加一个本地状态，保存当前活动的过滤器。为每个过滤器分配某种 ID，我建议您使用常量来执行此操作。之后，每次单击过滤器时，将单击的过滤器 id 保存在状态中并执行常规的 onClick 处理程序。然后在每个<li> 中为当前活动的过滤器添加一个检查并添加一个活动类。

希望对您有所帮助。