在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函数

回答

相关问题