Question

Jquery无法正常工作。什么时候，还没有在其他页面添加js。在这里，我举一个小例子。我有2页（index.html和about.html）。幻灯片横幅添加在索引页面中。但是，约会页面中没有横幅。所以，如果，我还没有在页面中添加横幅js（owl.carousel.min.js）。因此，其他jquery（返回顶部函数）在页面中不起作用。

在这里，我知道，我可以在索引页面中添加幻灯片jquery功能。从custom.js文件中删除。所以，它工作正常。但是，我不想要。因为，这是一个小例子。我们的网站很大（很多页面和js）。

我能做什么？

的index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="image/favicon.png" rel="icon" />
    <title>HomePage</title>
    <!-- CSS Part Start-->
    <link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    <!-- CSS Part End-->
    </head>
    <body>
    <div id="content" class="col-sm-12">
      <!-- Slideshow Start-->
      <div class="owl-carousel">
        <div class="item"> <a href="#"><img src="image/image1.jpg" alt="" /></a></div>
        <div class="item"> <a href="#"><img src="image/image2.jpg" alt="" /></a></div>
      </div>
      <!-- Slideshow End-->
    </div>
    <div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
    <!-- JS Part Start-->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!-- JS Part End-->
    </body>
    </html>

about.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="image/favicon.png" rel="icon" />
    <title>About Us</title>
    <!-- CSS Part Start-->
    <link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    <!-- CSS Part End-->
    </head>
    <body>
    <div id="content" class="col-sm-12">
      <!-- Slideshow Start-->
      <h1>About US</h1>
      Content Here
      <!-- Slideshow End-->
    </div>
    <div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
    <!-- JS Part Start-->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!-- JS Part End-->
    </body>
    </html>

custom.js

$(document).ready(function(){

//====== Slideshow ======//
$('.owl-carousel').owlCarousel({
    items: 6,
    autoPlay: 3000,
    singleItem: true,
    navigation: true,
    navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    pagination: true
});

//====== Scroll to top ======//

$(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 180) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        });
jQuery('.backtotop').click(function(){
    jQuery('html, body').animate({scrollTop:0}, 'slow');
});

//
});

Answer 1

也可以在about页面中包含owl.carousel.min.js文件。

- 关于Page -

{{1}}

Answer 2

使用以下

编辑自定义js

$(document).ready(function () {
    //====== Slideshow ======//
    if($('.owl-carousel').length > 0){
        $('.owl-carousel').owlCarousel({
            items: 6,
            autoPlay: 3000,
            singleItem: true,
            navigation: true,
            navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
            pagination: true
        });
   }
    //====== Scroll to top ======//
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 180) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
    });
    jQuery('.backtotop').click(function () {
        jQuery('html, body').animate({
            scrollTop: 0
        }, 'slow');
    });

});

将owl滑块脚本保持在条件内将解决您的问题。

jQuery在其他页面中不起作用

2 个答案: