Javascript JSFIDLE在浏览器中不起作用_Javascript_Jquery_Html_Css_Map

Javascript JSFIDLE在浏览器中不起作用

javascript jquery html css map

Javascript JSFIDLE在浏览器中不起作用,javascript,jquery,html,css,map,Javascript,Jquery,Html,Css,Map,我正在尝试运行一个交互式映射，并从关于堆栈溢出问题的最后一篇文章中借用代码：。然而，虽然该文件在JSFIDLE中工作得很好，但当我将其加载到浏览器中时，我会得到地图，以及我单击的地图上项目的轮廓，但div不会出现。发生了什么事，我如何让它运行我的代码如下所示： HTML文件： <!DOCTYPE> <html> <head> <title>Interactive Map</title> <

我正在尝试运行一个交互式映射，并从关于堆栈溢出问题的最后一篇文章中借用代码：。然而，虽然该文件在JSFIDLE中工作得很好，但当我将其加载到浏览器中时，我会得到地图，以及我单击的地图上项目的轮廓，但div不会出现。发生了什么事，我如何让它运行

我的代码如下所示：

HTML文件：

<!DOCTYPE>
<html>
    <head>
        <title>Interactive Map</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    </head>
    <body>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/U.S._Territorial_Acquisitions.png/320px-U.S._Territorial_Acquisitions.png" alt="" usemap="#texasmap" id="" />

    <map id="texasMap" name="texasmap">
        <area shape="circle" coords="135,150,45" href="#" alt="" item="texas" />
        <area shape="circle" coords="245,170,30" href="#" alt="" item="florida" />
    </map> 
<script type='text/javascript' src='script.js'></script<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>>
        <div id="texas" class="display">You clicked the Republic of Texas!</div>
        <div id="florida" class="display">You clicked Florida!</div>
    </body>
</html>

Javascript文件：

    $(document).ready( {
    $('[item]').click(function(){
        var item=$(this).attr('item');
        $(".display").hide();
        $("#"+item).show();
        return false;
    });
});

我还复制了JSFIDLE outputs网页上的源代码作为最终产品，并得到了相同的非结果：

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    *{
    margin:0px;
    padding:0px;
}
.display {
    width: 310px;
    background-color: red;
    color: white;
    padding: 5px;
    text-align:center;
    display:none;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){

    $('[item]').click(function(){
        var item=$(this).attr('item');
        $(".display").hide();
        $("#"+item).show();
        return false;
    });

});//]]>  

</script>


</head>
<body>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/U.S._Territorial_Acquisitions.png/320px-U.S._Territorial_Acquisitions.png" alt="" usemap="#texasmap" id="" />

<map id="texasMap" name="texasmap">
    <area shape="circle" coords="135,150,45" href="#" alt="" item="texas" />
    <area shape="circle" coords="245,170,30" href="#" alt="" item="florida" />
</map> 

<div id="texas" class="display">You clicked the Republic of Texas!</div>
<div id="florida" class="display">You clicked Florida!</div>


</body>


</html>

我做错了什么？

您检查过浏览器控制台有无错误吗？谢谢！看起来里面有一个额外的支架！完美地工作now@user3902997请考虑删除这个问题…

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    *{
    margin:0px;
    padding:0px;
}
.display {
    width: 310px;
    background-color: red;
    color: white;
    padding: 5px;
    text-align:center;
    display:none;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){

    $('[item]').click(function(){
        var item=$(this).attr('item');
        $(".display").hide();
        $("#"+item).show();
        return false;
    });

});//]]>  

</script>


</head>
<body>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/U.S._Territorial_Acquisitions.png/320px-U.S._Territorial_Acquisitions.png" alt="" usemap="#texasmap" id="" />

<map id="texasMap" name="texasmap">
    <area shape="circle" coords="135,150,45" href="#" alt="" item="texas" />
    <area shape="circle" coords="245,170,30" href="#" alt="" item="florida" />
</map> 

<div id="texas" class="display">You clicked the Republic of Texas!</div>
<div id="florida" class="display">You clicked Florida!</div>


</body>


</html>