gpt4 book ai didi

jquery - 如何将 Bootstrap 的 scrollspy 函数与非 Bootstrap 导航栏一起使用

转载 作者:太空宇宙 更新时间:2023-11-04 14:58:23 27 4
gpt4 key购买 nike

这是我的第一个没有 CMS 的网站,我对 jQuery 有点迷茫。我只是想根据用户所在的位置激活固定导航栏的元素。我正在使用 bootstrap 构建我的站点,这就是我使用 scrollspy 函数的原因。如果有人可以帮助我以其他方式做到这一点,那就太好了。我用 html、css 和 jquery 代码创建了一个 fiddle here我也在这里给你写下代码。提前致谢。

<body data-spy="scroll" data-target="#top-menu">
<div>
<ul id="top-menu" style="background: green;">
<li><a class="active" href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
</ul>
</div>
<br><br>

<div id="home">
<p>This is home section</p>
</div>
<div id="about">
<p>About</p>
</div>
<div id="portfolio">
<p>This is the portfolio</p>
</div>
</body>

jquery 是 here

最佳答案

您应该在代码中为 ul 元素添加“nav”类,并设置列表的父 div 元素的数据目标值 id。

像下面的代码:

<body data-spy="scroll" data-target="#top-menu">
<div id="top-menu">
<ul style="background: green;" class="nav">
<li><a class="active" href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
</ul>
</div>
<br><br>

<div id="home">
<p>This is home section</p>
</div>
<div id="about">
<p>About</p>
</div>
<div id="portfolio">
<p>This is the portfolio</p>
</div>
</body>

关于jquery - 如何将 Bootstrap 的 scrollspy 函数与非 Bootstrap 导航栏一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16738490/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com