Html 导航项目在div内的引导4 scrollspy不工作
我好像没法去工作。我有一个导航项目内的一个div项目，这是隐藏的时间。此导航项目需要使用scrollspy。我不确定问题是出在活动类还是其他方面。单击链接时，它不会变为活动。滚动到该部分也不起作用 main-page.htmlHtml 导航项目在div内的引导4 scrollspy不工作,html,css,twitter-bootstrap,bootstrap-4,scrollspy,Html,Css,Twitter Bootstrap,Bootstrap 4,Scrollspy,我好像没法去工作。我有一个导航项目内的一个div项目，这是隐藏的时间。此导航项目需要使用scrollspy。我不确定问题是出在活动类还是其他方面。单击链接时，它不会变为活动。滚动到该部分也不起作用 main-page.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- can be dropped but must appear be
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- can be dropped but must appear because of bootstrap warning -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My title</title>
<link rel="stylesheet" href="styles.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- JavaScript code for this page -->
<script src="main_page.js"></script>
</head>
<body>
<!-- A navbar that is always on top -->
<nav class="navbar navbar-expand-sm fixed-top">...</nav>
<div class="container-fluid">
<!-- Content that shows up when navigating to the site or when the logo is clicked -->
<div id="landing-page">...</div>
<!-- Shows all the Features of this product -->
<div id="features-page" hidden=true data-spy="scroll" data-target="features-navbar" data-offset="1">
<div class="jumbotron features-jumbotron text-center">
something
</div>
<!-- Navbar in question -->
<nav class="navbar navbar-expand-sm justify-content-center sticky-top" id="features-navbar">
<div class="gray-border">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link nav-button active" href="#lease-feature">Lease</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#finance-feature">Finances</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#organized-feature">Organized</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#community-feature">Community</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="feature-item" id="lease-feature">
lease-feature
<br/>
<br/>
<br/>
<br/>
<br/>
lease-feature end
</div>
<div class="feature-item" id="finance-feature">
Finance
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Finance end
</div>
<div class="feature-item" id="organized-feature">
organized
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
organized end
</div>
<div class="feature-item" id="community-feature">
community-feature
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
community-feature end
</div>
end
</div>
</div>
</body>
</html>
问题是我缺少了一个#，div data spy的样式，活动类属于li标记
<div id="features-page" hidden=true data-spy="scroll" data-target="#features-navbar" data-offset="1" style="overflow-y: scroll; height: 100vh; position:relative;">
问题在于我缺少一个#，用于div data spy的样式，活动类属于li标记
<div id="features-page" hidden=true data-spy="scroll" data-target="#features-navbar" data-offset="1" style="overflow-y: scroll; height: 100vh; position:relative;">