Question

我试图点击链接显示特定的div。像灯箱效应的东西。我设法点击链接加载并使用div弹出class动画，但我需要在其中显示特定内容。

＆＃13;

<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>

＆＃13;

我会感激任何帮助。提前谢谢。

这里是jsfiddle

Answer 1

您可以使用html5 data-属性来实现此功能。将其添加到锚标记以跟踪哪个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：

http://jsfiddle.net/n7j8o66f/

Answer 2

试试这个：

$(document).ready(function () {
    $('.pro a').click(function (event) {
        event.preventDefault();
        $('.pop').hide().eq($(this).index()).fadeIn(function () {
            $(this).css({
                'display': 'block'
            }, 550);
        });
    });
});

<强> jsFiddle example

Answer 3

您需要隐藏您显示的最后一个div。试试这个：

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;
        });
    });

    });

jsFiddle example

Answer 4

这是一个仅限CSS的解决方案：http://jsfiddle.net/35qnxome/。如果您希望保留所选内容的状态，则可以使用广播tabindex和:focus而不是input属性和label伪类组合。 {1}}伪类。

HTML：

:checked

CSS：

<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>

根据点击的链接显示div

4 个答案:

HTML：

JQUERY：

FIDDLE：