3

每当我单击锚点时，我都希望显示 div 弹出内容。但是使用此代码不会发生。

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ZoomMap Example</title>

    <link rel="stylesheet" type="text/css" href="mymap.css" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#id1").click(function(){
  $(".popupcontent").animate({opacity:1.0});

});
});
</script>


</head>
<body>

<h1>Manana</h1>

        <div id="container">            

            <div id="map">

                <img src="images/map.png"/>

            <a class="pointer" id="id1" href="#" >a </a>
            <a class="pointer" id="id2" href="#" > </a>
            <a class="pointer" id="id3" href="#" > </a>
            <a class="pointer" id="id4" href="#" > </a>
            <a class="pointer" id="id5" href="#" > </a>

                <div class="popupcontent">
                             <p></p>
                        </div>

            </div>
        </div>


</body>
</html>

该css文件包含以下代码。我已将此 div 的不透明度设为 0，以便它最初保持隐藏状态。当用户单击链接时，我已使用 animate 将不透明度更改为 1。但它仍然没有显示

   body{
margin:0;
padding:0;

}


#map{
dsplay:block;
margin:0;
padding:0;
width:600px;
height:300px;
position:absolute;
top:20%;
left:20%;

}

#map img{
margin:0;
padding:0;
width:600px;
height:300px;

z-index:1;

}
#map .pointer{
margin:0;
padding:0;
display: block;
 position: absolute; 
width: 5px; 
height: 5px; 
background: red; 
text-decoration: none; 
border: 1px solid red; 
opacity: .7;
z-index:2;
}

#map a.bullet {  z-index: 2; }


#map #id1{
left:123px;
top:40px;
}

#map #id2{
left:90px;
top:210px;
}

#map #id3{
left:225px;
top:20px;
}

#map #id4{
left:320px;
top:195px;
}

#map #id5{
left:425px;
top:20px;
}


#map .popupcontent{
background-color:yellow;
border-style:groove;
border-color:grey;
height:100px;
width:150px;
position:absolute;
top:30%;
left:30%;
opacity:0;
z-index:13;

}

#map .popupcontent p{

}

我已将这些链接放在图像的顶部。

4

4 回答 4

3

试试这个，

首先将“popupcontent”的css设置为 

display:none;

单击id1时 ，将其 css 设置为display:block;

$(document).ready(function() {  
    $("#id1").click(function() {  
         $(".popupcontent").css('display', 'block');     
    });  
});

在此处查看演示
http://jsfiddle.net/naresh3591/M5ahr/4/

于 2012-06-22T12:26:53.327 回答
0

它工作正常，请参阅此演示：http: //jsfiddle.net/rathoreahsan/M5ahr/2/

但你也可以试试这个：

$(document).ready(function(){
  $("#id1").click(function(){
     $(".popupcontent").fadeTo('slow', '1.0');
  });
});

演示：http: //jsfiddle.net/rathoreahsan/M5ahr/

于 2012-06-22T11:40:40.607 回答
0 
 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").fadeIn("fast");
      });
   });

或者

 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").show();
      });
   });
于 2012-06-22T11:49:58.413 回答
0

您可以使用淡入淡出功能

$(".popupcontent").fadeIn();
于 2012-06-22T11:52:03.310 回答