gpt4 book ai didi

jquery - 通过 jquery 在点击 anchor 时显示一个 div

转载 作者:行者123 更新时间:2023-11-28 09:51:24 25 4
gpt4 key购买 nike

每当我单击 anchor 时,我都希望显示 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{

}

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

最佳答案

试试这个,

首先将“popupcontent”的css设为

display:none;  

id1 被点击时,将其 css 设置为 display:block;

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

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

关于jquery - 通过 jquery 在点击 anchor 时显示一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11155471/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com