根据点击的链接显示div
[英]show div depending on link clicked
问题描述
I am trying to make that click on link show specific div. 
我试图使链接单击显示特定的div。 Something like lightbox effect. 像灯箱效果一样。 I managed to make that click on link loads and animate div with class pop but I need to show specific content in it. 我设法使单击链接加载并使用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>
I'll appreciate any help. 我将不胜感激。 Thanks in advance. 提前致谢。
4 个解决方案
解决方案1
2 2014-09-07 18:33:00
You can use html5 data- attribute to achieve this.Add it to the anchor tags to keep track which div to show as popup and utilize its id in the click event: 您可以使用html5 data-属性来实现此目的。将其添加到锚标记中，以跟踪哪个div显示为弹出窗口并在click事件中利用其ID：
HTML: 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: 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: 小提琴：
解决方案2
0 已采纳 2014-09-07 18:31:26
Try this: 尝试这个：
$(document).ready(function () {
$('.pro a').click(function (event) {
event.preventDefault();
$('.pop').hide().eq($(this).index()).fadeIn(function () {
$(this).css({
'display': 'block'
}, 550);
});
});
});
解决方案3
0 2014-09-07 18:31:45
You need to hide the last div that you showed. 您需要隐藏显示的最后一个div。 Try this: 尝试这个：
var lastElement = null;
$(document).ready(function(){
$('.pro a').click(function(event){
event.preventDefault();
$('.pop').fadeIn(function(){
if(lastElement)
$(lastElement).css({'display':'none'},550);
$(this).css({'display':'block'},550);
lastElement = this;
});
});
});
解决方案4
0 2014-09-07 18:56:55
Here's a CSS-only solution: http://jsfiddle.net/35qnxome/ . 这是仅CSS的解决方案： http : //jsfiddle.net/35qnxome/ 。 If you would like to persist the state of your selection, then instead of using tabindex property and :focus pseudo-class combination, you can use radio input and label and :checked pseudo-class. 如果要保留选择的状态，则可以使用单选input和label以及:checked伪类，而不是使用tabindex属性和:focus伪类组合。
HTML: HTML：
<div class="pro">
<a href="#" data-id="first" tabindex = "1">first</a>
<a href="#" data-id="second" tabindex = "2">second</a>
<a href="#" data-id="third" tabindex = "3">third</a>
<div class="pop" id="first">
<div class="mem">profile 1</div>
</div>
<div class="pop" id="second">
<div class="mem">profile 2</div>
</div>
<div class="pop" id="third">
<div class="mem">profile 3</div>
</div>
</div>
CSS: CSS：
.pro > div {
height: 500px;
display: none;
}
.pro > div:first-of-type {
background-color: rgba(255, 0, 0, 0.5);
}
.pro > div:nth-of-type(2) {
background-color: rgba(0, 255, 0, 0.5);
}
.pro > div:nth-of-type(3) {
background-color: rgba(0, 0, 255, 0.5);
}
.pro > a {
outline: 0;
}
.pro > a:first-of-type:focus ~ div:first-of-type,
.pro > a:nth-of-type(2):focus ~ div:nth-of-type(2),
.pro > a:nth-of-type(3):focus ~ div:nth-of-type(3) {
display: block;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.