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

我正在我的网站上创建一个FAQ部分，您可以通过单击其中一个部分主题来过滤问题。我有这个功能，但我想要的是，当一个章节标题被选中时，具体的标题应该从红色变为黑色并加下划线。当鼠标被按住时，它会工作，但一旦我放开它，它就会变回原来的状态。当某个部分处于活动状态时，如何使其保持这种状态

CSS:

标题：

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]

从“React”导入React；
导出默认类筛选器扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

all
general
stats
account
社交媒体

);
}
}[！[截图][1][1]

尝试以下操作： 从“React”导入React

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);
    }
}

说明： 添加保存当前活动筛选器的本地状态。对于每个过滤器，分配某种ID，我建议您使用常量。之后，每次单击过滤器时，将单击的过滤器id保存在状态中，并执行常规的onClick处理程序。然后为当前活动的筛选器在每个

中添加一个签入，并添加一个活动类

---

希望能有所帮助。

当我使用上面的代码，然后选择其中一个过滤器时，我会得到一个“TypeError:无法读取未定义的属性“target”以及“匿名函数”）src/components/Faqquestions2.js:23 20 | let filteredItems=[]；21 | 22 | this.state.items.forEach（function（item）{>23 | if（item.tags.includes（event.target.dataset.item））{^24 | filteredItems.push（item）；25 |}26 |}”我更新了答案。我不知道您正在使用事件参数，因为您没有通过道具提供原始的filter（）函数。请尝试新的解决方案。完美的解决方案！现在唯一不变的是颜色？下划线保持不变，但颜色变为红色而不是黑色…如果需要，可以通过添加列出的所有类来为我提供的CSS类添加更多规范，因为您以前的样式可能重写了我的代码。还要确保我介绍的课程放在你的课程之后。如果仍然不起作用，请尝试添加

！重要信息

（在本例中这并不糟糕，因为活动类用于覆盖常规类样式）。非常感谢您的帮助，我非常感谢！

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);
    }
}

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