Javascript动态替换按钮上的div内容点击

我想制作一个HTML5应用程序，我需要根据菜单选择动态更改不同html文件的div内容。代码我目前已加载菜单，但是当我点击一个按钮，我收到一条短消息“错误加载页面”，几秒钟后消失。我自己弄了一遍，不能弄清楚什么是错误的，所以我会显示我现在拥有的代码。Javascript动态替换按钮上的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>

我已经改变的点点滴滴，所以它不是在当前工作状态，但就如何解决任何建议/改进这个代码将不胜感激。

来源

2014-04-09 TriangleBanana

我不得不躺在我家的错误.html文件。 div中的一个不正确的语句影响了显示它的能力。

来源

2014-04-09 21:14:23 TriangleBanana

假设你有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>

来源

2014-04-09 11:29:11 Suketu

此方法突出显示活动按钮，它使我相信代码正在工作，但是我仍然无法从index.html中的dMain div中的home.html中查看内容，“错误加载页面”不再似乎可以做我的home.html页面？ – TriangleBanana

如果所有文件都在/ html /目录中，则尝试通过文件名本身加载。例如只有home.html。我相信错误加载页面意味着您的页面在该位置不可用。 – Suketu

好吧，我已重新启动我的IDE，它似乎仍然收到“Error Loading Page Error”，即使更改了文件名 – TriangleBanana

试试这个

$(function() { 

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

    e.preventDefault(); 

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

    }); 

});

来源

2014-04-09 11:31:26 mdesdev

这种方法与Suketu的答案类似，但我仍然无法看到dMain div中的home.html内容，这是否会导致我的home.html出现错误？ – TriangleBanana

@TriangleBanana依赖于'home.html'的内容。如果'home.html'位于根文件夹中的'html'文件夹中，则它必须工作。当然，你必须在头部包含jQuery库才能工作。 – mdesdev

我是否需要在home.html中包含JQuery库？我在index.html中包含了库，并尝试将“/html/home.html”更改为“home.html” – TriangleBanana

Javascript动态替换按钮上的div内容点击

回答

相关问题