我嚴重不能說出爲什麼我有這個問題。每次我嘗試將我的自定義CSS文件添加到標題。 我使用的腳本調用onepage,scroll.js 需要把文件中的頭<script src="http://greenbex.com/js/onepagescroll.js"></script>
然後把代碼寫... 這是我的頭「TypeError:'undefined'是不是一個函數」當試圖添加我的自定義css
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
<link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css"> //old css from another page
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<script src="http://greenbex.com/js/onepagescroll.js"></script>
<title>ElectroFen - Team</title>
</head>
這樣,所有工作正常,並做的工作, 但一旦我將其更改爲我的本地新的自定義CSS <link rel="stylesheet" type="text/css" href="css/style.css">
網頁一片空白,說
Uncaught TypeError: $(...).onepage_scroll is not a function(…) I have no idea what causes the problem ...
我的CSS文件,該
開始3210/* Prefix */
#mainpage {
height: 100vh;
width: 100vw;
}
html {
display: none;
}
.col-md-8, .col-md-4 {
padding: 0;
margin: 0;
}
.row {
margin-right: 0;
margin-left: 0;
}
/* HOME PAGE */
....
EDIT
這是完整的代碼,這種方式它的工作原理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
<link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<script src="http://greenbex.com/js/onepagescroll.js"></script>
<title>ElectroFen - Team</title>
</head>
<body>
<div class="main">
<section id="header">
<!-- code -->
</section>
<section id="projects">
<!-- code -->
</section>
<section id="projects">
<!-- code -->
</section>
<section id="projects">
<!-- code -->
</section>
</div>
</body>
<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>
</body>
</html>
加入我的新的自定義CSS文件<link rel="stylesheet" type="text/css" href="css/style.css">
後它不工作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
<link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css"> //this line
<script src="http://greenbex.com/js/onepagescroll.js"></script>
<title>ElectroFen - Team</title>
</head>
<body>
<div class="main">
<section id="header">
<!-- code -->
</section>
<section id="projects">
<!-- code -->
</section>
<section id="projects">
<!-- code -->
</section>
<section id="projects">
<!-- code -->
</section>
</div>
</body>
<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>
</body>
</html>
,並說
script.js:19 Uncaught TypeError: $(...).onepage_scroll is not a function(…)
的script.js有
//custom script here
onePageScroll(".main", {
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: false // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
});
$(document).ready(function(){
$(".main").onepage_scroll();
});
什麼是'onepage_scroll'?顯然這不是一個功能。 – Gavin
該錯誤表示腳本中出現錯誤;它與CSS無關。 – Pointy
@Pointy但是,在添加特定樣式表之前,它是如何工作的? – Bououm