Question

这可能是一个非常愚蠢的问题，但我在代码中包含一个jquery插件时遇到了麻烦。我引用的插件是：http://davidlynch.org/projects/maphilight/docs/

我想模仿与以下内容非常相似的内容： http://jsfiddle.net/keith/PVpgK/

但是当我复制代码时，我不断收到错误消息，说明＆＃34; maphilight不是函数＆＃34;

如何在我的代码中使用jquery插件？谢谢

$(function() {
   //using the jquery map highlight plugin:
   //http://davidlynch.org/js/maphilight/docs/

   //initialize highlight
   $('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});


   //hover effect
   $('#maplink1').mouseover(function(e) {
      $('#map1').mouseover();
   }).mouseout(function(e) {
      $('#map1').mouseout();
   }).click(function(e) { e.preventDefault(); });


   // initialize tabbing
   $(".tabs area:eq(0)").each(function(){
       $(this).addClass("current");
   });
   $(".tab-content").each(function(){
       $(this).children(":not(:first)").hide();    
   });


   //map clicks
   $(".tabs area").click(function(){

   //This block is what creates highlighting by trigger the "alwaysOn", 
   var data = $(this).data('maphilight') || {};
   data.alwaysOn = !data.alwaysOn;
   $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
   //there is also "neverOn" in the docs, but not sure how to get it to work


   if ($(this).hasClass("current") == false)
   {
       var thisTarget = $(this).attr("href");

       $(this).parents(".tabs").find('area.current').removeClass('current');

       $(this).addClass('current');

       $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
           $(thisTarget).fadeIn("fast");
       });

   }
   return false; 
  });
});

Answer 1

您需要在html标头中包含指向jquery的链接。

1）从HTML Entities

下载jquery

2）链接到标题中的下载文件

像这样：

<head>
     ...
     <script src="/path/to/jquery-1.11.3.min.js"></script>
     ...
</head>

Answer 2

如前所述。但是把它们放在身体标签的底部。

z-index

Answer 3

您需要将以下内容添加到html代码的标题中

<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>

如何在代码中包含一个jquery插件

3 个答案: