<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Insta Lpc</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/animate.css" type="text/css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="50"><div class="banner" style="background-image: url(images/banner.jpg);" id="home">
<div class="text wow fadeIn">
<h2>Find Your Next<br>Commercial Property</h2>
</div>
<div class="form wow fadeIn">
<div class="form-content">
<h5>Be the first to hear when a new property is available</h5>
<form>
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" required>
</div>
<div class="form-group">
<input type="email" placeholder="Business Email" class="form-control" required>
</div>
<div class="form-group">
<input type="number" placeholder="Number" class="form-control" required>
</div>
<button class="btn btn-primary btn-block">Get Notified Today</button>
</form>
</div>
</div>
</div>
<section class="section1" id="commercial">
<div class="container">
<div class="row">
<div class="image-text">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 wow fadeInLeft">
<div class="image">
<img src="images/first.jpg" class="img2">
<div class="textimg">
<h3>$10.5 Million</h3>
<p>Available</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 center wow fadeInRight">
<h1 class="text-center">Commercial Properties for sale</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section2 jumbotron">
<div class="container wow fadeInDown">
<div class="row">
<div class="columnn1">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
<div class="round">
<h3>10m</h3>
<p>Monthly Visitors</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
<div class="round">
<h3>800k</h3>
<p>Listings Available</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
<div class="round">
<h3>$40B</h3>
<p>In property for sale</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
<div class="round">
<h3>6.9B</h3>
<p>Property for lease</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="text-center">Expand Your Business and promote your company with a new commercial listing.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button class="btn btn-primary center-block">Notify me on new properties</button>
</div>
</div>
</div>
</section>
<section class="section3">
<div class="container">
<div class="row">
<div class="image-text">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 center wow fadeInLeft">
<h1 class="text-center">Commercial Properties for sale</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 wow fadeInRight">
<div class="image">
<img src="images/second.jpg" class="img2">
<div class="textimg">
<h3>$200k/Month</h3>
<p>Available</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section4">
<div class="banner" style="background-image: url(images/banner2.jpg);">
<div class="container-fluid">
<div class="row row-center">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 col-center wow fadeIn">
<div class="text1">
<h2>Be the first one to hear</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet.</p>
</div>
<button class="btn btn-primary display-block">Know More</button>
</div>
</div>
</div>
</div>
</section>
<section class="customers" id="review">
<h2 class="wow fadeIn">Real Customers Real Satisfaction</h2>
<div class="container">
<div class="row reviews">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 wow fadeInDown">
<div class="image-text1">
<img src="images/2.jpg" class="img-circle" id="rounded">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 wow fadeInUp">
<div class="image-text1">
<img src="images/3.jpg" class="img-circle" id="rounded">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 wow fadeInDown">
<div class="image-text1">
<img src="images/4.jpg" class="img-circle" id="rounded">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros leo, sed posuere metus volutpat vulputate. Sed auctor bibendum ante at laoreet</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
</div>
</div>
</section>
<div class="banner2" style="background-image: url(images/lastimage.jpeg)">
<div class="container wow fadeOutDown">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="text-last">
<h2>Find Your Next Commercial Property</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="button1">
<button class="btn btn-success btn-block">Get Notified Today</button>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row footer">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="connected">
<h4>Stay connected</h4>
<div class="form-group">
<input type="text" placeholder="Email Address" required>
<button class="btn btn-primary">Signup</button>
</div>
</div>
<div class="socialicons">
<h4>Follow Us</h4>
<a href="#" class="fa fa-facebook fb followus"></a>
<a href="#" class="fa fa-twitter tw followus"></a>
<a href="#" class="fa fa-google gp followus"></a>
<a href="#" class="fa fa-linkedin li followus"></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="middle">
<h4>Committed to us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.uis pellentesque eros leo, sed posuere metus volutpat vulputate.Sed auctor bibendum ante at laoreet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 bottomnav">
<h4>Navigate</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#commercial">Commercial Properties</a></li>
<li><a href="#review">Review</a></li>
</ul>
</div>
</div>
<div class="copyrights">
<h4>Copyrights @floretmedia</h4>
</div>
</div>
</footer>我正在尝试在滚动时自动更改菜单列表。我不知道为什么它对我不起作用.....单击列表项它会完美更改但是当我们向下滚动时会出现问题
这是示例代码
谢谢`
$('.nav li a').click(function(e) {
$('.nav li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#commercial">Commercial Properties</a></li>
<li><a href="#review">Review</a></li>
</ul>
</div>
</div>
</nav>最佳答案
您的代码运行良好。我认为你没有在 Header 部分添加 JS。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关于javascript - 为什么列表项在 body 滚动时没有改变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52869157/