Question

每当我点击锚点时，我都希望显示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{

}

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

Answer 1

试试这个，

首先将“popupcontent”的CSS作为

display:none;

点击 id1 后，将其css设为display:block;

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

在这里查看演示
http://jsfiddle.net/naresh3591/M5ahr/4/

Answer 2

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

但你也可以试试这个：

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

DEMO： http://jsfiddle.net/rathoreahsan/M5ahr/

Answer 3

 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").fadeIn("fast");
      });
   });

OR

 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").show();
      });
   });

Answer 4

您可以使用fadeIn功能

$(".popupcontent").fadeIn();

通过jquery单击锚点显示div

4 个答案: