我正在创建一个使用HTML，CSS和一些JavaScript的新网站，并且已经碰壁了。我是网站创建的新手，这将是我建立的第二个网站，所以请耐心等待。
我的代码如下：
gd.html：
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="./JavaScript/shadowbox/shadowbox.css">
<script src="./JavaScript/shadowbox/shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();</script>
<script src="./JavaScript/gdScript.js"></script>
<title>The Web Page</title>
</head>
<body id="gd">
<ul id="navigation">
<li><a id="nav-index" href="index.html"></a></li>
<li><a id="nav-gd" href="gd.html">Gaming Desktops</a></li>
<li><a id="nav-ws" href="ws.html">Work Stations</a></li>
<li><a id="nav-hd" href="hd.html">Home Desktops</a></li>
<li><a id="nav-ocs" href="ocs.html">Other Computer Sizes</a></li>
<li><a id="nav-gdht" href="gdht.html">Guides and How To's</a></li>
<li><a id="nav-about" href="about.html">About</a></li>
</ul>
<div id="main">
<h1>The Gaming Desktop Page.</h1>
<p id="question">Firstly are you sure you want to build a full size gaming desktop?</p>
<br>
<p id="center">A full sized desktop (ATX) will take up a massive amount of space, about a meter and a half in verticle space! Look at the "Other Computer Sizes" tab if you want something with the same power but much smaller.</p>
<br><br>
<div id="options"><button type="button" id="continue" onclick="switchtogames()">Yes</button></div>
<div id="options">No</div>
</ul>
</div>
<div id ="footer">
<h1 id="footer-text">Copyright MystPhysX, 2013</h1>
</div>
</body>
gd copy.html：
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script type="text/javascript" src="./JavaScript/gdScript.js"></script>
<link rel="stylesheet" type="text/css" href="./JavaScript/shadowbox/shadowbox.css">
<script type="text/javascript" src="./JavaScript/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<title>The Web Page</title>
</head>
<body id="gd">
<ul id="navigation">
<li><a id="nav-index" href="index.html"></a></li>
<li><a id="nav-gd" href="gd.html">Gaming Desktops</a></li>
<li><a id="nav-ws" href="ws.html">Work Stations</a></li>
<li><a id="nav-hd" href="hd.html">Home Desktops</a></li>
<li><a id="nav-ocs" href="ocs.html">Other Computer Sizes</a></li>
<li><a id="nav-gdht" href="gdht.html">Guides and How To's</a></li>
<li><a id="nav-about" href="about.html">About</a></li>
</ul>
<div id="main">
<h1>The Gaming Desktop Page.</h1>
<p id="question">Okay, time for a quiz!</p>
<br>
<p id="center">This quiz will determine what parts I am going to recommend for your new gaming desktop. Please play along for a while!</p>
<p id="center">Okay first question: <i><b>"What kind of games are you going to play?"</b></i> I need you to answer this question to see what level of graphics you are going to be playing at.</p>
<br>
<div id="imageoption">
<a id="gallery" href="./Images/minecraft3.jpg" rel="shadowbox[Minecraft]"></a>
<a id="gallery" href="./Images/minecraft2.jpg" rel="shadowbox[Minecraft]"></a>
<a href="./Images/minecraft1.jpg" rel="shadowbox[Minecraft]">
<img id="games1" src="./Images/minecraft.png">
<p id="gametitle1"><b>Minecraft: </b><i>Low</i></p>
<p id="gametext1">
<i>
Minecraft is a sandbox indie game originally created by Markus "Notch" Persson. The creative and building aspects of Minecraft allow players to build constructions out of textured cubes in a 3D procedurally generated world. Other activities in the game include exploration, gathering resources, crafting, and combat. Minecraft does not require much resources and can be run on the most basic of gaming computers without any worries.
<button id="gamechoice" onclick="minecraft()">
Choose Minecraft
</button>
</i>
</p>
</a>
</div>
<div id="imageoption">
<a id="gallery" href="./Images/Borderlands1.jpg" rel="shadowbox[Borderlands 2]"></a>
<a id="gallery" href="./Images/Borderlands2.jpg" rel="shadowbox[Borderlands 2]"></a>
<a href="./Images/Borderlands3.jpg" rel="shadowbox[Borderlands 2]">
<img id="games2" src="./Images/borderlands.png">
<p id="gametitle2"><b>Borderlands 2: </b><i>Medium</i></p>
<p id="gametext2">
<i>
Borderlands 2 is an action role-playing first-person shooter ("loot and shoot") video game. It is the sequel to 2009's Borderlands and like the first game, Borderlands 2 players complete a campaign consisting of central quests and optional side-missions as one of four "vault hunters" on the planet Pandora. Key gameplay features from the original game, such as online collaborative campaign gameplay; randomly generated loot, such as weapons and shields are found in Borderlands 2. A mid-range gaming computer will be able to run Borderlands 2.
<button id="gamechoice" onclick="borderlands2()">
Choose Borderlands 2
</button>
</i>
</p>
</a>
</div>
<div id="imageoption">
<a id="gallery" href="./Images/Crysis1.png" rel="shadowbox[Crysis 3]"></a>
<a id="gallery" href="./Images/Crysis2.png" rel="shadowbox[Crysis 3]"></a>
<a href="./Images/Crysis3.png" rel="shadowbox[Crysis 3]">
<img id="games1" src="./Images/crysis.png">
<p id="gametitle1"><b>Crysis 3: </b><i>High</i></p>
<p id="gametext1">
<i>
Crysis 3 is a first-person shooter video game developed by Crytek running on Cryengine game engine. It is the third main installment of the Crysis series, a sequel to the 2011 video game Crysis 2, and runs on the CryEngine 3 game engine. It was one of the most anticipated upcoming games of 2013. Crysis 3 is one of the most demanding games released this year and will require a very powerful gaming computer to run.
<button id="gamechoice" onclick:"crysis3()">
Choose Crysis 3
</button>
</i>
</p>
</a>
</div>
</div>
<div id ="footer">
<h1 id="footer-text">Copyright Elijah, 2013</h1>
</div>
gdScript.js：
function switchtogames()
{
document.getElementById('main').innerHTML= '<h1>The Gaming Desktop Page.</h1>\
<p id="question">Okay, time for a quiz!</p>\
<br>\
<p id="center">This quiz will determine what parts I am going to recommend for your new gaming desktop. Please play along for a while!</p>\
<p id="center">Okay first question: <i><b>"What kind of games are you going to play?"</b></i> I need you to answer this question to see what level \
of graphics you are going to be playing at.</p>\
<br>\
<div id="imageoption">\
<a id="gallery" href="./Images/minecraft3.jpg" rel="shadowbox[Minecraft]"></a>\
<a id="gallery" href="./Images/minecraft2.jpg" rel="shadowbox[Minecraft]"></a>\
<a href="./Images/minecraft1.jpg" rel="shadowbox[Minecraft]">\
<img id="games1" src="./Images/minecraft.png">\
<p id="gametitle1"><b>Minecraft: </b><i>Low</i></p>\
<p id="gametext1">\
<i>\
Minecraft is a sandbox indie game originally created by Markus "Notch" Persson. The creative and building aspects of Minecraft allow players to build constructions out of textured cubes in a 3D\
procedurally generated world. Other activities in the game include exploration, gathering resources, crafting, and combat. Minecraft does not require much resources and can be run on the most basic \
of gaming computers without any worries.\
<button id="gamechoice" onclick="minecraft()">\
Choose Minecraft\
</button>\
</i>\
</p>\
</a>\
</div>\
<div id="imageoption">\
<a id="gallery" href="./Images/Borderlands3.jpg" rel="shadowbox[Borderlands 2]"></a>\
<a id="gallery" href="./Images/Borderlands2.jpg" rel="shadowbox[Borderlands 2]"></a>\
<a href="./Images/Borderlands1.jpg" rel="shadowbox[Borderlands 2]">\
<img id="games2" src="./Images/borderlands.png">\
<p id="gametitle2"><b>Borderlands 2: </b><i>Medium</i></p>\
<p id="gametext2">\
<i>\
Borderlands 2 is an action role-playing first-person shooter ("loot and shoot") video game. It is the sequel to 2009s Borderlands and like the first game, Borderlands 2 players complete a campaign\
consisting of central quests and optional side-missions as one of four "vault hunters" on the planet Pandora. Key gameplay features from the original game, such as online collaborative campaign\
gameplay; randomly generated loot, such as weapons and shields are found in Borderlands 2. A mid-range gaming computer will be able to run Borderlands 2.\
<button id="gamechoice" onclick="borderlands2()">\
Choose Borderlands 2\
</button>\
</i>\
</p>\
</a>\
</div>\
<div id="imageoption">\
<a id="gallery" href="./Images/Crysis3.png" rel="shadowbox[Crysis 3]"></a>\
<a id="gallery" href="./Images/Crysis2.png" rel="shadowbox[Crysis 3]"></a>\
<a href="./Images/Crysis1.png" rel="shadowbox[Crysis 3]">\
<img id="games1" src="./Images/crysis.png">\
<p id="gametitle1"><b>Crysis 3: </b><i>High</i></p>\
<p id="gametext1">\
<i>\
Crysis 3 is a first-person shooter video game developed by Crytek running on Cryengine game engine. It is the third main installment of the Crysis series, a sequel to the 2011 video game Crysis 2, \
and runs on the CryEngine 3 game engine. It was one of the most anticipated upcoming games of 2013. Crysis 3 is one of the most demanding games released this year and will require a very powerful gaming \
computer to run.\
<button id="gamechoice" onclick:"crysis3()">\
Choose Crysis 3\
</button>\
</i>\
</p>\
</a>\
</div>';
}
我要做的是将gd.html的div＃main中的代码替换为gd copy.html的div＃main中的代码。我在我的网站上使用了一个名为Shadowbox的Javascript图像库，用于一些图像，它在gd copy.html中运行良好，但在我更换内容时无法工作，如上所述。复制的代码来自gd copy.html（我用它作为模板）所以我不明白为什么它不应该工作。
如果可以，请帮忙！
如果你需要，Here就是所有文件。
答案 0 :(得分：1)
它不起作用的原因是因为当调用Shadowbox.init（）时，它会在页面上查找所有rel ='shadowbox'元素。由于您要动态添加新内容，因此必须重新初始化shadowbox。
试试这个：
function switchtogames()
{
document.getElementById('main').innerHTML= 'your html';
Shadowbox.setup();
}
答案 1 :(得分：0)
脚本失败，因为您修改了DOM和Shadowbox.init（）;不知道页面上的新元素。
调用Shadowbox.init（）; DOM更改完成后。