在html中放置和調用javascript函數

我是javascript的noob，這可能是一個愚蠢的問題，但我寫了一個簡單的javascript函數來滑動到網頁上的特定元素。代碼如下：http://jsfiddle.net/bhbTr/在html中放置和調用javascript函數

但是，當我嘗試將javascript和html放在單個html文件中時，它似乎不起作用。下面是我有：

<head> 
    <title>Test</title> 
    <link rel='stylesheet' id='css' href='style1.css' type='text/css' media='all'> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript">> 
    function goToByScroll(id){ 
      // Remove "link" from the ID 
      id = id.replace("link", ""); 
      var off = $("#"+id).offset().top - 50; 
      // Scroll 
      $('html,body').animate({ 
       scrollTop: off}, 
       'slow'); 
     } 

    $("#navbar > ul > li > a").click(function(e) { 
      // Prevent a page reload when a link is pressed 
      e.preventDefault(); 
      // Call the scroll function 
     goToByScroll($(this).attr("id"));   
     }); 

    $("#navbar > a").click(function(e) { 
      // Prevent a page reload when a link is pressed 
      e.preventDefault(); 
      // Call the scroll function 
      goToByScroll($(this).attr("id"));   
     }); 
</script> 
</head> 

<body> 
    <!-- Begin Wrapper --> 
    <div id="wrapper"> 
     <div class="navbar" id="navbar"> 
      <a href="#" id="WhoWeArelink" class="navbarlogo">Test</a> 
      <ul> 
       <li><a id = "WhoWeArelink" href="#">Who We Are</a></li> 
       <li><a id = "WhatWeDolink" href="#">What We do</a></li> 
       <li><a id = "OurWorklink" href="#">Our Work</a></li> 
       <li><a id = "Contactlink" href="#">Contact Us</a></li> 
      </ul> 
     </div> 
     <div class="contentcontainer"> 
      <div class="WhoWeAre" id="WhoWeAre"> 
       <p class="header">uck</p> 
       <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
      <div class="WhatWeDo"id="WhatWeDo"> 
       <p class = "header">Projects</p> 
       <p class="info">Projects</p> 
      </div> 
      <div class="OurWork" id="OurWork"> 
       <p class = "header">Resume</p> 
       <p class="info">Resume</p> 
      </div> 
      <div class="Contact" id="Contact"> 
       <p class = "header">Contact</p> 
       <p class="info">Contact</p> 
      </div> 
     </div> 
</div> 
<!-- End Wrapper --> 
<!-- Begin Footer --> 
<div class="footer"> 
     <p style="text-align:center;">Some bullshit copyright (c) insert year here</p> 
</div> 
<!-- End Footer --> 
</body>

我想不出我做錯了什麼，但我懷疑它是與沒有被鏈接調用的函數。我真的很感激，如果任何人有任何建議

來源

2013-03-08 Jawwad Zakaria

您需要做兩件事。首先，在第二個腳本標籤上取下額外的右括號。

其次，包裝你的JavaScript代碼，以便在文檔就緒時執行。你使用jQuery，因此使用下面的代碼片段：

<script type="text/javascript"> 
$(function() { 
    function goToByScroll(id){ 
     // Remove "link" from the ID 
     id = id.replace("link", ""); 
     var off = $("#"+id).offset().top - 50; 
     // Scroll 
     $('html,body').animate({ 
      scrollTop: off}, 
      'slow'); 
    } 

    $("#navbar > ul > li > a").click(function(e) { 
     // Prevent a page reload when a link is pressed 
     e.preventDefault(); 
     // Call the scroll function 
     goToByScroll($(this).attr("id"));   
    }); 

    $("#navbar > a").click(function(e) { 
     // Prevent a page reload when a link is pressed 
     e.preventDefault(); 
     // Call the scroll function 
     goToByScroll($(this).attr("id"));   
    }); 
}); 
</script>

有幾個建議，我必須提高你的代碼。我會保持簡單並遵循這兩件事。

首先，您可以將點擊處理程序與單個以逗號分隔的選擇器相結合。其次，您可以使用this.id將id置於click函數的元素之外，不需要使用jQuery函數來訪問id屬性，它可以在關鍵字代表點擊處理程序中代表的HTML元素上直接使用。

$("#navbar > ul > li > a, #navbar > a").click(function(e) { 
    // Prevent a page reload when a link is pressed 
    e.preventDefault(); 
    // Call the scroll function 
    goToByScroll(this.id); 
});

我叉你的jsfiddle展示JavaScript的變化（沒有固定的腳本標籤）：jsFiddle

我希望幫助！

來源

2013-03-08 04:21:42

<script type="text/javascript">>

你有一個額外的角度支架thingy在最後。

來源

2013-03-08 04:20:02 Doorknob

在html中放置和調用javascript函數

回答

相關問題