javascript - 使用 JavaScript 替换页面内容不起作用-6ren

javascript - 使用 JavaScript 替换页面内容不起作用

转载作者：太空宇宙更新时间：2023-11-04 14:59:13

我正在为学校创建一个使用 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 copy.html 的 div#main 中的代码替换 gd.html 的 div#main 中的代码。我正在使用名为 Shadowbox 的 Javascript 图片库在我的网站上有几张图片，它在 gd copy.html 中工作得很好，但是当我如上所述替换内容时无法工作。复制过来的代码来自 gd copy.html(我用它作为模板)所以我不明白为什么它不应该工作。

如果可以，请帮忙!

Here是所有的文件，如果你想要的话。

最佳答案

它不起作用的原因是，当调用 Shadowbox.init() 时，它会查找页面上的所有 rel='shadowbox' 元素。因为您正在动态添加新内容，所以您将不得不重新初始化 shadowbox。

试试这个:

function switchtogames()
{
    document.getElementById('main').innerHTML= 'your html';
    Shadowbox.setup();
}

关于javascript - 使用 JavaScript 替换页面内容不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16638433/

文章推荐： java - 包含 OneToOne 映射的映射类 (OneToMany) 出现问题

文章推荐： javascript - jquery 单击时在 html 中出现另一个元素

文章推荐： java - Spring 3\Quartz 2.集成问题

文章推荐： html - Perl 打印从数组到 html 的正则表达式匹配项

php - 如何用 "a"替换 "d"，用 "b"替换 "e"，用 "c"替换 "f"，。 . . "x"和 "a"， "y"和 "b"， "z"和 "c"？
我想对一个字符串执行搜索和替换，比如 password。正如您从问题中了解到的那样，替换后的字符串应变为 sdvvzrug。但不幸的是，下面的代码输出bbbbcaab: $search = ran
Python future 化而不用 old_div 替换/替换
我正在使用 futurize --stage2它应用了许多源代码转换以使代码 python2 和 python3 兼容。其中一个修复是所有分区 a/b 都替换为 old_div(a/b)，我想避免这种
read.csv 用 `?` 替换 `.` 等列名字符，用 `-` 替换 `...`
我正在使用 RStudio，但我在控制台上的输出被截断了。我找不到如何停止截断(我尝试搜索 ?options 以及在谷歌上搜索的时间比我想承认的要长)。编辑:我向大家道歉!我最初的长名称为“This
android - 替换、添加、替换 fragment ，然后导航后退按钮不适用于第一个 fragment
我有一个 fragment 堆栈，我在其中使用替换和相加。添加或替换我的 fragment 的代码(在我的 Activity 中)如下 private fun addFragment(fragment
javascript - 在 javascript 变量上一次性用 %20 替换/替换 ""和 ""？
我在一个数组中插入了一些字符串，但在我这样做之前，我想按照主题所说的去做。只用 %20 替换空格，我这样做: Name.push(linkText.replace(" ", "%20")); 但是我如
Java - StringBuilder 替换()显示错误 : method String. 替换(char，char)不适用
我正在尝试编译和测试我在网上看到的代码 Expanding an IP add 。但是，当我尝试编译它时，我收到有关 StringBuilder 替换方法的错误。它说: IPadd.java:52:
用 dplyr 中的 data_frame() 替换 data.frame 并用 bind_cols() 替换 cbind
我正在尝试使用 dplyr 的最新功能重写我的部分代码，方法是将 data.frame() 替换为 data_frame() 和 cbind() 与 bind_cols(): library(rgeo
替换()与 "[<-"？
我最近偶然发现了 replace()和 "[ x.tst s.tst s.tst [,1] [,2] [,3] [1,] 0 0 0
Vim 替换
我一直想知道，如何在给定的参数内进行替换。如果你有这样的一行: 123,Hello,World,(I am, here), unknown 你想更换 World与 Foobar那么这是一个简单的任务
java:替换 "with\"
如何转义字符串中的双引号？例如， input: "Nobody" output: \"Nobody\" 我尝试过这样的操作，但不起作用: String name = "Nobody"; name.r
JavaScript 替换
我正在做类似的事情: SQL sql sQl SqL var ps = document.getElementsByTagName('p'); for(var i = 0; i 但它不会替换文本。
javascript - 替换 "with\"
我正在尝试用 \" 替换所有 " 并用 JSON 解析字符串，但浏览器抛出错误 SyntaxError: JSON Parse error: Unrecognized token '\'. 下面是代码
Javascript 替换
大家好，在这里挣扎...... 是否可以将第一个正斜杠之间的任何内容替换为“”，但保留其余部分？例如var 将是 string "/anything-here-this-needs-to-be-re
JavaScript 替换
在下面的代码中，JavaScript 替换函数中的 alert(a) 将提醒匹配的字符串，在本例中，将是 {name} 和 {place}。这按照文档 javascript docs 的描述工作，即
MySQL 替换
+-----------------------------+ | tables | +-------------------
Java 替换 "with\"
我正在尝试用\"替换包含 "的字符串，下面是我尝试过的程序 String s="\"/test /string\""; s = s.replaceAll("\"", "\\\"");
JavaScript 替换？
var text = "a's ..a's ...\"... "; text = convert(text); function convert( text ) { var n = text
JavaScript 替换()
我正在尝试使用 JavaScript 中的替换函数，但有一个问题。 strNewDdlVolCannRegion = strNewDdlVolCannRegion.replace(/_existing
Javascript 替换
好吧，首先我对我的上一篇文章感到非常抱歉，但我真的需要帮助，我会把我真正想要的东西放在一个更清晰的代码中。我不擅长 javascript，所以希望你能帮助我。
Python拆分、替换
我正在写一张纸条，遇到了障碍。可能有更有效的方法来执行此操作，但我对 Python 还很陌生。我正在尝试创建用户生成的 IP 地址列表。我正在使用 print 来查看生成的值是否正确。当我运行此代码时

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 JavaScript 替换页面内容不起作用