内联PrettyPhoto框中的简单jquery脚本无法正常工作

时间:2013-09-18 13:16:46

标签: javascript jquery prettyphoto

我在PrettyPhoto内联框中使用了漂亮的照片和一个简单的jquery脚本。 为什么我不能隐藏这个漂亮照片框中的div?我不明白为什么这不起作用......

<!DOCTYPE html>
<html>
    <head>
        <title>Pretty photo test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />
        <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <li><a href="#inline_demo" rel="prettyPhoto[inline]">Inline content 1</a></li>

        <div id="inline_demo" style="display:none;">
          <div id="testje" style="display:block">this is a test</div>
          <a onclick="$('#testje').hide(); return false">Close test div</a>
        </div>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto();
            });
        </script>           
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

无需添加[inline]

<li><a href="#inline_demo" rel="prettyPhoto">Inline content 1</a></li>

<div id="inline_demo" style="display:none;">
  <div id="testje">this is a test</div>
  <a onclick="$('#testje').hide(); return false;">Close test div</a>
</div>