Question

我正在尝试创建一个HTML5应用程序，我需要根据菜单选择动态更改具有不同html文件的div的内容。我目前的代码加载菜单但是当我点击一个按钮时，我收到一条短信＆＃34;加载页面错误＆＃34;几秒后消失了。我自己也在弄乱它，并且无法弄清楚出了什么问题，所以我将展示我目前的代码。

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库，如果没有则支持ajax 加载jquery 1.11和jquery ui 1.10.3以及theme 尝试，

<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 个答案: