我的代码有麻烦。我正在尝试启用滚动间谍，但无法正常工作。我也无法让图库正常工作。任何帮助将不胜感激。当您向下滚动页面时，我尝试添加Scrollspy以突出显示顶部导航栏中的链接。
我还试图找出我的照相馆怎么了。我希望这些图像成为缩略图，您可以单击它们，以调出全尺寸图像的模态，您可以通过单击该模态将其关闭。
$('body').scrollspy({target: '#main-nav', offset: 200});
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000
});
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});.stripe {
background-color: #79EBC6;
height: 100%;
width: 100%;
}
.navbar {
margin: 0;
right: 0;
position: fixed;
z-index: 999;
background-color: #58E4B3;
width: 100%;
color: white;
}
.navbar a {
color: white;
background-color: #58E4B3;
}
.nav li {
float:left;
}
.centered {
text-align: center;
}
.text {
padding: 1rem;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
text-align: left;
flex: 0 1 32%;
}
.cards {
margin-top: 5em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 15rem;
}
.collapse {
margin-left: 15px;
}
.jumbotron {
width: 50%;
margin: auto;
background-color: #79EBC6;
}
.carousel {
height: 25%;
width: 50%;
margin: auto;
padding: 2em;
}
.tab-pane {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-color: white;
}
.display-4 {
text-align: center;
}
.fa-check {
font-size: 1.25rem;
padding: 1.5rem;
}
.d-flex {
text-align: center;
margin: auto;
}
.section {
padding: 3rem 0;
}
.form-row {
text-align: left;
}
.modal-body {
text-align: left;
}
.btn-button1 {
width: 100%;
background-color: #58E4B3;
}
.card-body {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-color: white;
text-align: left;
}
.card-body .btn-success {
margin-left: .5em;
}
body {
font-family: "Asap", sans-serif;
margin:10px;
font-size:16px;
}
#demo {
height:100%;
position:relative;
overflow:hidden;
}
.green{
background-color:#6fb936;
}
.thumb{
margin-bottom: 30px;
}
.page-top{
margin-top:85px;
}
img.zoom {
width: 100%;
height: 200px;
border-radius:5px;
object-fit:cover;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}
.transition {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}<!DOCTYPE html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<title>Bootstrap 4.2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Your Custom CSS -->
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Features</title>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top id=main-nav">
<div class="container">
<a href="index.html" class="navbar-brand" navbar-brand">Features</a>
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link" href="#cards">Cards<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#carosel">Carosel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tabs">Tabs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#images">Images</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#forms">Forms</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<body data-spy="scroll" data-target="#main-nav">
<section id="images">
<a name="images"></a>
<h2 class="mb-5 text-center">Photo Gallery</h2>
<div class="container">
<div class="row">
<div class="row text-center text-lg-left align-items-end">
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="images">
</section>
<a name="forms"></a>
<section id="forms" class="stripe">
<div class="container">
<h2 class="mb-5 text-center">Forms</h2>
<div class="row">
<div class="col-lg-8">
<div class="col mb-2">
<div class="card-body">
<h5 class="card-title">Last Name, First Name</h5>
<form>
<div class="form-row">
<div class="form-group col-lg-3 col-md-6">
<label for="fName" class="col-form-label">First Name</label>
<input class="form-control form-control-sm" id= "fName" placeholder="First Name">
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="lName" class="col-form-label">Last Name</label>
<input class="form-control form-control-sm" id= "lName" placeholder="Last Name">
</div>
<div class="form-group col">
<label for="mi" class="col-form-label">MI</label>
<input class="form-control form-control-sm" id= "mi" placeholder="MI">
</div>
<div class="form-group col">
<label for="bday" class="col-form-label">Birthday</label>
<input class="form-control" type="date" value="yyyy-mm-dd" id="bday" placeholder="Birthday">
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-4 col-md-6">
<label for="email" class="col-form-label">Email</label>
<input class="form-control form-control-sm" id= "email" placeholder="Email">
</div>
<div class="form-group col-lg-4 col-md-6">
<label for="cell" class="col-form-label">Cell Phone</label>
<input class="form-control form-control-sm" id= "cell" placeholder="Cell Phone">
</div>
<div class="form-group col-lg-4 col-md-6">
<label for="work" class="col-form-label">Work Phone</label>
<input class="form-control form-control-sm" id= "work" placeholder="Work Phone">
</div>
<div class="form-row">
<div class="form-group col-lg-6 col-md-6">
<label for="city" class="col-form-label">City</label>
<input class="form-control form-control-sm" id= "city" placeholder="City">
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="state" class="col-form-label">State</label>
<input class="form-control form-control-sm" id= "state" placeholder="State">
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="zip" class="col-form-label">Zip</label>
<input class="form-control form-control-sm" id= "zip" placeholder="Zipcode">
</div>
<div class="form-row">
<button type="button" class="btn btn-outline-success">Edit</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="stripe">
<div class="container">
<div class="col text-center py-4">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
Contact Us
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Contact Us</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control"></textarea>
</div>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-button1" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://cdnjs.com/libraries/ekko-lightbox"></script>
<script type="text/javascript" src="plugin/jrate/jquery/jRating.jquery.js"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
</body>
</html>
出于空间原因，我移走了很多尸体。任何帮助将不胜感激。
答案 0 :(得分：0)
在您的HTML代码中，导航栏元素开始标记存在问题：
<nav class="navbar navbar-expand-sm navbar-dark fixed-top id=main-nav">
该标签应替换为：
<nav class="navbar navbar-expand-sm navbar-dark fixed-top" id="main-nav">
我认为您的代码无法正常工作，因为您没有将class属性与id属性分开。