我想用 React 在 fullpage.js 中添加 class 'active',但我不知道如何
I want to add the class 'active' in fullpage.js with react, and I don't know how
我正在使用 fullpage.js,我希望它取决于我所在的部分。添加 class = 'active' 或删除相同的 class。例如:如果我在 #section1 添加 'active' 如果我离开它并转到 #section2 在 #section2 添加 'active' 并删除 #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>
)
}
}
您可以使用包含布尔道具的对象创建状态。如果链接到它们的对象获得“真”值,则在每个部分上设置一个“活动”class。
并设置一个函数,当您点击某个部分时会触发 false / true
到 good prop 的对象?
你实际上不需要。
fullPage.js 除了在 body
元素,(例如fp-viewing-page2-1
)
您可以在文档中阅读有关这些状态的更多信息 class。
https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs
我正在使用 fullpage.js,我希望它取决于我所在的部分。添加 class = 'active' 或删除相同的 class。例如:如果我在 #section1 添加 'active' 如果我离开它并转到 #section2 在 #section2 添加 'active' 并删除 #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>
)
}
}
您可以使用包含布尔道具的对象创建状态。如果链接到它们的对象获得“真”值,则在每个部分上设置一个“活动”class。
并设置一个函数,当您点击某个部分时会触发 false / true
到 good prop 的对象?
你实际上不需要。
fullPage.js 除了在 body
元素,(例如fp-viewing-page2-1
)
您可以在文档中阅读有关这些状态的更多信息 class。 https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs