2016-11-10 37 views
-2

我嚴重不能說出爲什麼我有這個問題。每次我嘗試將我的自定義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(); 
    }); 
+0

什麼是'onepage_scroll'?顯然這不是一個功能。 – Gavin

+0

該錯誤表示腳本中出現錯誤;它與CSS無關。 – Pointy

+0

@Pointy但是,在添加特定樣式表之前,它是如何工作的? – Bououm

回答

0

可能是需要插入jquery?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="http://greenbex.com/js/bootstrap.js"></script> 
<script src="http://greenbex.com/js/onepagescroll.js"></script> 

<script src="http://greenbex.com/js/script.js"></script> 

引導順序很重要

+0

不,如你所見,如果你自己看看「onepagescroll.js」文件沒有jQuery依賴關係。 – Pointy

+0

我有jquery插件,否則當我不添加該css文件時,它將不起作用 – Bououm

+0

@Bououm CSS文件鏈接的存在/不存在將導致/阻止該錯誤。 – Pointy

0

我會recomended放置3個腳本:

<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> 

在此之前之一:

<script src="http://greenbex.com/js/onepagescroll.js"></script> 
+0

這是行不通的。這些行必須位於''末尾。 – Pointy

1

由於您使用的是純淨版的插件,刪除行$(".main").onepage_scroll();

該插件已被加載,並且不需要重新初始化,這也會導致問題。

編輯:

你一直在使用這種pluginhttps://github.com/peachananr/purejs-onepage-scroll,不需要jQuery的。

但是,您已經使用了此pluginhttps://github.com/peachananr/onepage-scroll的jQuery所需的初始化。

+0

嗯,我使用第二個...需要jQuery。 – Bououm

+0

打開http://greenbex.com/js/onepagescroll.js,你會看到它的純粹版本。 –

+0

糾正我,如果即時通訊錯誤,但在[文檔](https://github.com/peachananr/onepage-scroll)有說在標題中添加一個jQuery庫的greenbex.com/js/onepagescroll.js。然後調用函數來激活'(「.main」)。onepage_scroll({...'和我在腳本中一樣。js – Bououm

相關問題