1

索引.html

<!DOCTYPE html>
<html>
 <head>
   <script>
    function cha(title){
     document.getElementById("change").innerHTML=title;
    }
   </script>
 </head>
 <body>
   <ul>                                              //sample navigation bar
    <li><a href='index.html'>Home</a></li>           //sample navigation bar
    <li><a href='mission.html' onclick='cha("Mission")'>Mission</a></li> //sample navigation bar
   </ul>                                             //sample navigation bar
     THIS IS MY HOME PAGE
 </body>
</html>

任务.html

<!DOCTYPE html>
<html>
 <head>

 </head>
 <body>
   <ul>                                              //sample navigation bar
    <li><a href='index.html'>Home</a></li>           //sample navigation bar
    <li><a href='mission.html'>Mission</a></li>      //sample navigation bar
   </ul>                                             //sample navigation bar
     <h1 id='change'>THIS IS MY Mission </h1>
 </body>
</html>

这 2 个网页的理想输出是当我单击 index.html 中的任务时，mission.html 中的标题<h1>将更改其内部内容，从 THIS IS MY Mission 它将变成仅如中所述的任务cha("Mission");，但我不知道这是错误的在我的代码中，我的理想输出没有显示。谢谢大家，对我的语法感到抱歉。

4

1 回答 1

1

可以使它成为一个单页解决方案，其中mission.html 仅包含任务数据，这样您就可以按原样将其直接加载到 index.html 中，而根本不必从页面导航。

如果您有能力使用 JQuery/AJAX，您可以加载 html，然后在“成功”时触发文本更改。您可以在页面某处添加一个“任务”div 以将mission.html 加载到其中。

HTML 标头

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

HTML 正文

<div id="mission"></div>

Javascript

function cha(title){
    $('#mission').load('mission.html', function(title) {
        document.getElementById("change").innerHTML=title;
    });
}

如果它是一个可用的选项，我希望这会有所帮助

于 2013-04-23T03:42:40.050 回答