我试图让点击链接显示特定的 div。有点像灯箱效果。我设法使单击链接加载并使用 class pop 为 div 设置动画，但我需要在其中显示特定内容。
<html>
<head>
<style>
.pop{
background-color: rgba(17,17,17,0.50);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index: 1000;
overflow-x: hidden;
overflow-y: hidden;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.pro a').click(function(event){
event.preventDefault();
$('.pop').fadeIn(function(){
$(this).css({'display':'block'},550);
});
});
});
</script>
</head>
<div class="pro">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="pop" id="1">
<div class="mem">profile 1</div>
</div>
<div class="pop" id="2">
<div class="mem">profile 2</div>
</div>
</html>我将不胜感激任何帮助。 提前致谢。
这里是 jsfiddle
最佳答案
您可以使用 html5 data- 属性来实现这一点。将它添加到 anchor 标记以跟踪哪个 div 显示为弹出窗口并在点击事件中使用其 id:
HTML:
<div class="pro">
<a href="#" data-id="first">first</a>
<a href="#" data-id="second">second</a>
<a href="#" data-id="third">third</a>
</div>
<div class="pop" id="first">
<div class="mem">profile 1</div>
</div>
<div class="pop" id="second">
<div class="mem">profile 1</div>
</div>
<div class="pop" id="third">
<div class="mem">profile 1</div>
</div>
JQUERY:
$(document).ready(function () {
$('.pro a').click(function (event) {
event.preventDefault();
$('.pop').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
}, 550);
});
});
});
fiddle :
关于javascript - 根据点击的链接显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25713433/