トップナビゲーション用のjqueryタブのセットがあります（タブは単なるテキストリンクであり、「グラフィカル」タブではありません）。リンクをクリックすると、外部の html ファイルを含むファンシーボックスが開きます。これは起こっていません。ファンシーボックスは起動していません。以下は私のコードです。皆さん/ギャルは、私が間違っていることと修正方法を教えてもらえますか? 私はそれを理解するのに苦労しています。ありがとう。
スクリプト:
<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>
ファンシーボックスのレッスン/追加1.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>
ファンシーボックスのレッスン/減算1.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>
