Javascript在单击按钮时动态替换div内容

Question

我正在尝试制作HTML5应用，并且我需要根据菜单选择动态地更改具有不同html文件的div的内容。 我当前拥有的代码将加载菜单，但是，当我单击按钮时，会收到一条短消息“错误加载页面”，该消息几秒钟后消失。 我自己弄弄它，无法完全弄清楚出了什么问题，所以我将显示当前的代码。

index.html-

<body>
<div data-role="page" id="index">
<div id="wrapper">
    <div data-role="controlgroup" data-corners="false" data-position="left">
        <a href="/html/home.html" id="home" data-role="button">HOME</a>
        <a href="/html/tracking.html" id="track" data-role="button">TRACKING</a>
        <a href="/html/favourites.html" id="fav" data-role="button">FAVOURITES</a>
        <a href="/html/setting.html" id="set" data-role="button">SETTINGS</a>
        <a href="/html/login.html" id="login" data-role="button">LOG IN</a>
    </div>
    <div id="main">
        <div id="header" data-role="header" data-theme="b">
            <a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:0px;" href="#navpanel">MENU</a>

        </div>
        <div id="dMain"> </div>
    </div>
</div>
</div>  

<script> 
//$(document).ready(function(){
//$('#home').click(function(){  
//    $('#dMain').load('/html/home.html');
// });
//});

</script>    
</body>

home.html-

<body>
<div data-role="page" id="home">
<h1>Hello</h1>
<h2>This is the home page</h2>
<p>it will contain about us information</p> 
</div>
</body>

我已进行了一些零零碎碎的修改，因此它目前不在工作状态，但是有关如何修复/改进此代码的任何建议将不胜感激。

Answer 1

假设您已正确加载了jquery库，如果未加载jquery 1.11和jquery ui 1.10.3以及主题 Try，则该库支持ajax，

<script> 
$(document).ready(function(){
$('#home').click(function(e){  
    $('#dMain').load('/html/home.html');
    e.preventDefault();
 });
});

</script>

Answer 2

尝试这个

$(function() {

  $('#home').click(function(e) {

    e.preventDefault();

    $.ajax({
      type: 'GET',
      url: '/html/home.html',
      dataType: 'html',
      success: function(response) {
        $('#dMain').html(response);
      }
    });

  });

});

Answer 3

我放置在home.html文件中的错误。 div中的一个不正确的语句正在影响其显示能力。

Javascript在单击按钮时动态替换div内容

问题描述

3 个解决方案

解决方案1
2 2014-04-09 11:29:11

解决方案2
2 2014-04-09 11:31:26

解决方案3
0 已采纳 2014-04-09 21:14:23

Javascript在单击按钮时动态替换div内容

问题描述

3 个解决方案

解决方案1 2 2014-04-09 11:29:11

解决方案2 2 2014-04-09 11:31:26

解决方案3 0 已采纳 2014-04-09 21:14:23

解决方案1
2 2014-04-09 11:29:11

解决方案2
2 2014-04-09 11:31:26

解决方案3
0 已采纳 2014-04-09 21:14:23