个人中心
gpt4 book ai didi

javascript - 为什么列表项在 body 滚动时没有改变？

转载 作者：行者123 更新时间：2023-11-28 00:57:34 26 4
gpt4 key购买 nike 

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

26 4 0
文章推荐： c++ - basic_streambuf 的函数上溢下溢如何操作
文章推荐： c++ - 这是编写析构函数的正确方法吗？
文章推荐： javascript - 使用周数跳转到/显示日历中的特定周
文章推荐： c# - 使用 C#.Net 内置桌面软件在网站上编辑一段数据的可能性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com