我是WebDev的新手，正在尝试实现typed.js jQuery插件。我已将脚本添加到我的代码中，但我的网页上没有显示任何内容。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DEPARTMENTS | RNS INSTITUTE OF TECHNOLOGY | Bangalore, India </title>
<!--- CSS Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet">
<link href="./typed.js-master/main.css"rel="stylesheet">
<!--- JS files -->
<script src="./js/jquery-1.11.3.js"></script>
<script src="./jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./parallax.js-1.3.1/parallax.js"></script>
<script src="./typed.js-master/js/typed.js"></script>
<script>
//javascript code for HAMBURGLER - the drop down menu
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
// code for typed.js
$(function(){
$("#texttype").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 150
backDelay : 900
loop : true
});
});
});
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
</head>
<body>
<nav class="navbar navbar-fixed-top">
<div class="logo">
<a class="navbar-brand" href="index.html"> <img alt="logo" src="logo.jpg"> <h4>RNS Institute Of Technology</h4></a>
</div>
<div class="mobilenav">
<li><a href="departments.html">DEPARTMENTS</a></li>
<li><a href="admission.html">ADMISSIONS</a></li>
<li><a href="govbody.html">GOVERNING BODY</a></li>
<li><a href="life.html">LIFE @ RNSIT</a></li>
<li><a href="campus_news.html">CAMPUS NEWS</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</div>
<a href="javascript:void(0)" class="icon">
<div class="hamburger">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
</nav>
<div class="pictures">
<div class="container-fluid">
<h1>DEPARMENTS <span id="texttype"></span>
</h1>
<div class="column">
<div class="col-md-4">
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
</div>
</div>
<div class="column">
<div class="col-md-4">
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
</div>
</div>
<div class="column">
<div class="col-md-4">
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
任何帮助都很受欢迎。在此先感谢：）
答案 0 :(得分：0)
请在发布之前尝试删除语法错误，这样可以帮助您轻松找到问题。
试试这个：这只是一个演示，所以图片和CSS都会丢失。
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
// code for typed.js
$("#texttype").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 150,
backDelay : 900,
loop : true
});
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
});<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DEPARTMENTS | RNS INSTITUTE OF TECHNOLOGY | Bangalore, India </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<!--- JS files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js"></script>
<script src="http://www.mattboldt.com/demos/typed-js/js/typed.custom.js"></script>
<body>
<nav class="navbar navbar-fixed-top">
<div class="logo">
<a class="navbar-brand" href="index.html"> <img alt="logo" src="logo.jpg"> <h4>RNS Institute Of Technology</h4></a>
</div>
<div class="mobilenav">
<li><a href="departments.html">DEPARTMENTS</a></li>
<li><a href="admission.html">ADMISSIONS</a></li>
<li><a href="govbody.html">GOVERNING BODY</a></li>
<li><a href="life.html">LIFE @ RNSIT</a></li>
<li><a href="campus_news.html">CAMPUS NEWS</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</div>
<a href="javascript:void(0)" class="icon">
<div class="hamburger">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
</nav>
<div class="pictures">
<div class="container-fluid">
<h1>DEPARMENTS <span id="texttype"></span>
</h1>
<div class="column">
<div class="col-md-4">
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
</div>
</div>
<div class="column">
<div class="col-md-4">
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
</div>
</div>
<div class="column">
<div class="col-md-4">
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
<div class="thumbnail">
<img src="cake.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>