ScrollSpy无法正常工作Bootstrap 4和照片库无法正常工作

时间：2019-02-27 03:44:02

标签： javascript html css

我的代码有麻烦。我正在尝试启用滚动间谍，但无法正常工作。我也无法让图库正常工作。任何帮助将不胜感激。当您向下滚动页面时，我尝试添加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">&times;</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>

出于空间原因，我移走了很多尸体。任何帮助将不胜感激。

1 个答案:

答案 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属性分开。

相关问题
最新问题