通過jquery點擊錨點顯示div

每當我點擊錨點時，我想讓div彈出窗口內容顯示出來，但是這段代碼並沒有發生。通過jquery點擊錨點顯示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的不透明度，以便它最初保持隱藏。當用戶點擊一個鏈接時，我使用動畫將不透明度更改爲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{ 

}

我已將這些鏈接放置在圖像的頂部。

來源

2012-06-22 Pooja

我也想該div與一些內容彈出。 – Pooja

Hiya @Pooja Howz it bruv：這似乎是在這裏工作：http://jsfiddle.net/vPCf7/1/';）'希望這可以幫助 –

''你的錨點沒有任何文本點擊。在這裏檢查你的代碼工作：http://jsfiddle.net/5M9qg/ – Ghokun

試試這個，

首先要「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-22 12:26:53

仍然不工作 – Pooja

檢查它http://jsfiddle.net/naresh3591/M5ahr/4 / –

它工作正常，請參閱本演示：http://jsfiddle.net/rathoreahsan/M5ahr/2/

但是你可能嘗試，這也：

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

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

來源

2012-06-22 11:40:40

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

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

來源

2012-06-22 11:49:58 Ajai

我的代碼仍然沒有工作。我粘貼我的整個代碼 – Pooja

您可以使用淡入功能

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

來源

2012-06-22 11:52:03

通過jquery點擊錨點顯示div

回答

相關問題