堆棧內存溢出
  簡體   English   中英

我如何將我的JavaScript鏈接到此html才能工作

[英]How do I link my javascript to this html to work

 原文  2014-10-07 16:39:15  1   3    javascript/ html

問題描述

我是編碼的新手，目前正在該網站上工作，但我的JavaScript無法正常工作。 javascript用於使不同部分之間的過渡平滑而美觀。 如果你們能幫助我，那將真的很棒。 我知道問題可能很簡單，但請幫助需要幫助的人。 :)

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;
});

3 個解決方案

解決方案1
 0  2014-10-07 16:42:34

使用<script></script>標簽。 將您的JS代碼放在html頁面上的這些腳本之間。 它將開始工作。

另一種干凈的方法是使用制作單獨的JavaScript文件。 將其命名為例如hello.js。 然后在html的<head>標記中，將該行鏈接到您的JavaScript文件。 

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

解決方案2
 0  2014-10-07 16:45:16

將其放在文件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>

解決方案3
 0  2014-10-07 16:51:26

我認為您去添加了jQuery代碼，但在以正確方式調用它時卻卡住了。 您可以執行以下操作。

1）覆蓋您的JS代碼

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

要么

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

2）將您的JavaScript / jQuery代碼放入.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>

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

注意：我沒有檢查過您的JS代碼邏輯，我只是​​給出了有關如何使用此JS代碼工作的說明。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將JavaScript函數鏈接到HTML元素？ 如何使此鏈接在javascript中起作用 如何有效地將javascript鏈接到html？ Java 腳本功能不起作用，如何將我的 javascript 文件添加到 html 並使其工作 如何將內部JavaScript文件鏈接到GitHub中的HTML文件 如何將我的 javascript 正確鏈接到我的 html 表單？ 如何將我的HTML鏈接到我的jQuery？ 如何讓一個事件監聽器處理通過javascript添加到我的html的元素？ 如何通過html鏈接標記傳遞javascript變量？ 如何將 HTML 鏈接的 alt 文本放入 JavaScript？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM