在 HTML 中导入外部 JS 链接
[英]Import external JS links in HTML
问题描述
我正在尝试制作一个响应式推荐 HTML 文件。 它适用于 codepen（链接在此处）并且运行良好。 当我在 sublimetext 上传输它时，它似乎不起作用。 我相信这是由于我的<script>代码的位置。 众所周知，codepen 的格式与实际代码的格式不同。 有人能告诉我我哪里出错了吗？ 我对如何导入或声明外部 JS 链接和定位感到困惑。 提前致谢
这是我所做的（更新，我删除了 main.js 并单独保存了它，然后调用了它。我相信格式首先是供应商，然后是 main.js）
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Testimonials</title>
<link rel="stylesheet" href="css/styles.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/boostrap.min.css" rel="stylesheet"/>
<link href="css/owl.carousel.min.css" rel="stylesheet"/>
<link href="css/animate.min.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.thenahid.com/wp-content/themes/twentyseventeen/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<section>
<div class="customer-feedback">
<div class="container text-center">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div>
<h2 class="section-title">What Clients Say</h2>
</div>
</div><!-- /End col -->
</div><!-- /End row -->
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
<div class="feedback-slider">
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/8/7310/buddyicons/24846422@N06_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Lisa Redfern</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138@N07_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Cassi</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="4">
4
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Md Nahidul</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
</div><!-- /End feedback-slider -->
<!-- side thumbnail -->
<div class="feedback-slider-thumb hidden-xs">
<div class="thumb-prev">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
5
<i class="fa fa-star"></i>
</span>
</div>
<div class="thumb-next">
<span>
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138@N07_r.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
4
<i class="fa fa-star"></i>
</span>
</div>
</div>
<!-- /side thumbnail -->
</div><!-- /End col -->
</div><!-- /End row -->
</div><!-- /End container -->
</div><!-- /End customer-feedback -->
</section>
</body>
</html>
JAVASCRIPT main.js
jQuery(document).ready(function($) {
var feedbackSlider = jQuery('.feedback-slider');
feedbackSlider.owlCarousel({
items: 1,
nav: true,
dots: true,
autoplay: true,
loop: true,
mouseDrag: true,
touchDrag: true,
navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
responsive:{
// breakpoint from 767 up
767:{
nav: true,
dots: false
}
}
});
feedbackSlider.on("translate.owl.carousel", function(){
$(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
});
feedbackSlider.on("translated.owl.carousel", function(){
$(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
});
feedbackSlider.on('changed.owl.carousel', function(property) {
var current = property.item.index;
var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
$('.thumb-prev').find('img').attr('src', prevThumb);
$('.thumb-next').find('img').attr('src', nextThumb);
$('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
$('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
});
$('.thumb-next').on('click', function() {
feedbackSlider.trigger('next.owl.carousel', [300]);
return false;
});
$('.thumb-prev').on('click', function() {
feedbackSlider.trigger('prev.owl.carousel', [300]);
return false;
});
}); //end ready
下面是显示我们现在拥有的输出。 我相信这与我如何声明 css 和 js 外部代码My Current Output 有关
1 个解决方案
解决方案1
0 2018-02-14 05:39:22
在此将 scr 编辑为 src
<script type="text/javascript" scr="js/main.js"></script>
Android WebView不显示带有外部js链接的html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.