【问题标题】:I want to add the class 'active' in fullpage.js with react, and I don't know how我想在 fullpage.js 中添加类“活动”并做出反应,但我不知道如何
【发布时间】:2021-06-09 12:32:59
【问题描述】:

我正在使用 fullpage.js,我希望这取决于我所在的部分。添加 class= 'active' 或删除同一类。例如:如果我在 #section1 添加 'active' 如果我离开并转到 #section2 add 'active' in #section2 并删除 #section1 中的 'active'

export default class SearchNav extends React.Component {

render(){
    return (
        <div id='fp-nav' class='left'>
            <ul>
                <li>
                    <a href="#section1"></a>
                </li>
                <li>
                    <a href="#section2"></a>
                </li>
                <li>
                    <a href='#section3'></a>
                </li>
                <li>
                    <a href='#section4'></a>
                </li>
            </ul>
        </div>
    )
}

}

【问题讨论】:

    标签: javascript reactjs fullpage.js


    【解决方案1】:

    你实际上不需要。

    fullPage.js 会在活动部分/幻灯片中自动为您添加 active 类,并在 body 元素上添加另一个“状态”类(例如 fp-viewing-page2-1

    您可以在文档中阅读有关这些状态类的更多信息。 https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs

    【讨论】:

      【解决方案2】:

      您可以使用包含布尔道具的对象创建状态。如果链接到它们的对象获得 `true` 值,则在每个部分上设置一个 `active` 类。

      当你点击一个部分时,设置一个函数会触发false / true到好道具的对象?

      【讨论】:

      • 我明白你的意思,但我希望它改变而不依赖于点击。你能给我举个例子吗,最近我开始编程了
      猜你喜欢
      • 2021-01-21
      • 1970-01-01
      • 2022-01-08
      • 2019-01-29
      • 1970-01-01
      • 1970-01-01
      • 2011-06-21
      • 2022-09-23
      • 2010-12-11
      相关资源
      最近更新 更多