Question

我有一组用于顶部导航的jquery选项卡（选项卡只是文本链接，而不是“图形”选项卡）。当您单击链接时，我想要打开一个包含外部html文件的fancybox。这不会发生。没有奇特的盒子正在推出。以下是我的代码。你们/ gals能让我知道我做错了什么以及如何解决？我无法搞清楚。感谢。

脚本：

<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css"  />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script language="javascript" src="../js/fancybox/jquery.fancybox.js"></script>

HTML：

<script type="text/javascript">
$(document).ready(function() {

    $("#lesson-tabs").tabs();

    $(".tabs-content").fancybox({

                'type':'iframe',
                'maxWidth'  : 580,
                'maxHeight' : 390,
                'fitToView' : false, 
                'width'     : 500,
                'height'    : 300,
                'autoSize'  : false
    });

});
    </script>

<div class="overhide" id="lesson-tabs">
        <ul>
          <li>
               <span class="fun2learn-add" ></span>
               <a href="lessons/addition1.html" class="first-class2 tabs-content" >Addition</a>
           </li>
           <li>
               <span class="fun2learn-subtract" ></span>
               <a href="lessons/subtraction1.html" class="first-class2 tabs-content">Subtraction</a>
           </li>
    </ul>
</div>

为fancybox提供的课程/ addition1.html代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Just try it!</title>
<style>
div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.blkstyle {display:block;}
input[type=submit] {margin-top:10px;}
</style>
</head>

<body>
<div>
<p>If you have 14 apples, Justin has 12 and Mary gives you 7 more apples, but only gives Justin 3 apples, how many apples would you and Justin have altogether?</p>
<form>
<span class="blkstyle"><input type="radio" name="apples" /><label>24</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>42</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>36</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
<input type="submit" value="Answer" />
</form>

</div>
</body>
</html>

用于fancybox的

lessons / subtraction1.html代码：

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Just try it!</title>
    <style>
    div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
    .blkstyle {display:block;}
    input[type=submit] {margin-top:10px;}
    </style>
    </head>

    <body>
    <div>
        <p>Jamie has 38 lives left in play for his new video game.  
        He loses 6 lives on level Nine and 5 lives on level Twelve.  
        He hasn't gained anymore lives until level Twenty, where he gets 4 more, 
        but loses 1 life in play.  How many lives does Jamie have left in play?</p>
        <form>
            <span class="blkstyle"><input type="radio" name="apples"  /><label >26</label></span>
            <span class="blkstyle"><input type="radio" name="apples" /><label>30</label></span>
            <span class="blkstyle"><input type="radio" name="apples" /><label>22</label></span>
            <span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
            <input type="submit" value="Answer" class="blkstyle"/>
        </form>

    </div>
</body>
</html>

enter image description here

如何从jquery UI选项卡导航中打开包含.html文件的fancybox

0 个答案: