Question

我试图运行一个交互式地图，并从堆栈溢出问题的最后帖子中借用代码：How can I use an image map to show/hide a particular div?。然而，虽然文件在jsfiddle中完美运行，但当我将其加载到浏览器中时，我得到了地图，以及我点击的地图上项目的轮廓，但是没有显示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>

CSS文件：

*{
    margin:0px;
    padding:0px;
}
.display {
    width: 310px;
    background-color: red;
    color: white;
    padding: 5px;
    text-align:center;
    display:none;

}

Javascript文件：

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

我还从网页jsfiddle输出中复制了源代码作为最终产品，得到了相同的（非）结果：

完整代码：

<!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>

我做错了什么？

jsfiddle在浏览器中不起作用

0 个答案: