我如何鏈接我的JavaScript到這個HTML工作

我是一個新的編碼，目前在這個網站上工作，我無法讓我的JavaScript工作。 javascript用於使不同部分之間的轉換順暢而美觀。如果你們能幫助我，那真是太棒了。我知道這個問題可能非常簡單，但請幫助有需要的noobie。 :)我如何鏈接我的JavaScript到這個HTML工作

HTML：

<html lang="en"> 
<head> 



<link rel="stylesheet" type="text/css" href="style.css"> 
<title><!-- Insert your title here --></title> 
</head> 
<body> 
<nav> 
<ul> 
<li><a href="#1">First</a></li> 
<li><a href="#2">Second</a></li> 
<li><a href="#3">Third</a></li> 
<li><a href="#4">Fourth</a></li> 
<li><a href="#5">Fifth</a></li> 
</ul> 
</nav> 

<div class="sections"> 
<section id="1"><h1>First</h1></section> 
<section id="2"><h1>Second</h1></section> 
<section id="3"><h1>Third</h1></section> 
<section id="4"><h1>Fourth</h1></section> 
<section id="5"><h1>Fifth</h1></section> 
</div> 

<footer></footer> 


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">   
</script> 
</body> 
</html>

的javascript：

var sections = $('section') 
, nav = $('nav') 
, nav_height = nav.outerHeight(); 

$(window).on('scroll', function() { 
var cur_pos = $(this).scrollTop(); 

sections.each(function() { 
var top = $(this).offset().top - nav_height, 
    bottom = top + $(this).outerHeight(); 

if (cur_pos >= top && cur_pos <= bottom) { 
    nav.find('a').removeClass('active'); 
    sections.removeClass('active'); 

    $(this).addClass('active'); 
    nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); 
} 
}); 
}); 

nav.find('a').on('click', function() { 
var $el = $(this) 
, id = $el.attr('href'); 

$('html, body').animate({ 
scrollTop: $(id).offset().top - nav_height 
}, 500); 

return false; 
});

來源

2014-10-07 user3465508

Java和JavaScript之間有一個HUUUGE區別 – 2014-10-07 16:40:57

可能出現[在HTML標記中放置

把它放在一個文件，即myfile.js並將其綁定到你的HTML這樣的：

<script src="script/myfile.js"></script>

，並確保你的腳本之前添加jquery lib

全碼

<html lang="en"> 
<head> 



<link rel="stylesheet" type="text/css" href="style.css"> 
<title><!-- Insert your title here --></title> 
</head> 
<body> 
<nav> 
<ul> 
<li><a href="#1">First</a></li> 
<li><a href="#2">Second</a></li> 
<li><a href="#3">Third</a></li> 
<li><a href="#4">Fourth</a></li> 
<li><a href="#5">Fifth</a></li> 
</ul> 
</nav> 

<div class="sections"> 
<section id="1"><h1>First</h1></section> 
<section id="2"><h1>Second</h1></section> 
<section id="3"><h1>Third</h1></section> 
<section id="4"><h1>Fourth</h1></section> 
<section id="5"><h1>Fifth</h1></section> 
</div> 

<footer></footer> 


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">   
</script> 
<script src="script/myfile.js"></script> 
</body> 
</html>

或只是做這個

<html lang="en"> 
<head> 



<link rel="stylesheet" type="text/css" href="style.css"> 
<title><!-- Insert your title here --></title> 
</head> 
<body> 
<nav> 
<ul> 
<li><a href="#1">First</a></li> 
<li><a href="#2">Second</a></li> 
<li><a href="#3">Third</a></li> 
<li><a href="#4">Fourth</a></li> 
<li><a href="#5">Fifth</a></li> 
</ul> 
</nav> 

<div class="sections"> 
<section id="1"><h1>First</h1></section> 
<section id="2"><h1>Second</h1></section> 
<section id="3"><h1>Third</h1></section> 
<section id="4"><h1>Fourth</h1></section> 
<section id="5"><h1>Fifth</h1></section> 
</div> 

<footer></footer> 


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">   
</script> 
<script> 
var sections = $('section') 
, nav = $('nav') 
, nav_height = nav.outerHeight(); 

$(window).on('scroll', function() { 
var cur_pos = $(this).scrollTop(); 

sections.each(function() { 
var top = $(this).offset().top - nav_height, 
    bottom = top + $(this).outerHeight(); 

if (cur_pos >= top && cur_pos <= bottom) { 
    nav.find('a').removeClass('active'); 
    sections.removeClass('active'); 

    $(this).addClass('active'); 
    nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); 
} 
}); 
}); 

nav.find('a').on('click', function() { 
var $el = $(this) 
, id = $el.attr('href'); 

$('html, body').animate({ 
scrollTop: $(id).offset().top - nav_height 
}, 500); 

return false; 
}); 
</script> 
</body> 
</html>

來源

2014-10-07 16:45:16

我想你去添加一個jQuery代碼，但堅持以適當的方式調用它。您可以執行以下操作。

1）內

$(document).ready(function(){ //your code goes here });

jQuery(document).ready(function($){ //your code goes here });

2）把你的JavaScript/jQuery代碼在.js文件覆蓋您的JS代碼。

3）將jQuery庫文件之後的文件調用到您的HTML代碼中。

例如

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">   
</script> 

<script src="pathto/yourfile.js">   
</script>

你也可以把你的代碼中<script></script>標籤在HTML文件本身，而不是創建一個單獨的JS。但是，無論哪種情況，主要的是應該首先加載jQuery庫，以便您的jQuery代碼可以運行。

注意：我沒有檢查過你的JS代碼邏輯，我只是給出瞭如何使用這個JS代碼的指令。

來源

2014-10-07 16:51:26 WisdmLabs

相關問題