Jquery 如何使用引导程序&x27；带非引导导航栏的ScrollsSpy功能_Jquery_Html_Css

Jquery 如何使用引导程序&x27；带非引导导航栏的ScrollsSpy功能

jquery html css

Jquery 如何使用引导程序&x27；带非引导导航栏的ScrollsSpy功能,jquery,html,css,Jquery,Html,Css,这是我第一个没有CMS的网站，我对jQuery有点迷茫。我只是想根据用户所在的位置激活固定导航栏的元素。我正在用bootstrap构建我的站点，这就是我使用scrollspy功能的原因。如果有人能帮我用另一种方式做那就太好了。我已经创建了一个html、css和jquery代码我也把代码写在这里。提前谢谢 <body data-spy="scroll" data-target="#top-menu"> <div> <ul id="top-menu" style="b

这是我第一个没有CMS的网站，我对jQuery有点迷茫。我只是想根据用户所在的位置激活固定导航栏的元素。我正在用bootstrap构建我的站点，这就是我使用scrollspy功能的原因。如果有人能帮我用另一种方式做那就太好了。我已经创建了一个html、css和jquery代码我也把代码写在这里。提前谢谢

<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是

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

Smth如以下代码所示：

<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>










这是主页
关于
这是投资组合