Question

我正在尝试将HTML文件加载到div部分，但是load（）方法似乎不起作用，因为当我单击链接时，html文件在新选项卡中打开而不是加载到div中标签。

剧本：

<script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function(){
                $('#main-content').load($(this).attr("href"));
                return false;
            });
        });
</script>

'a'标签：

<li><a href="about.html">ABOUT</a></li>

我希望加载我的html文件：

<div class="col-sm-9 blog-main" id="main-content">
...
</div>

如何使load（）方法有效？

我在Windows上使用Chrome。

Answer 1

这是a代码的默认行为。而不是将html.file设置为在href属性中加载，最好将其保留在自定义属性中。

 <a href="#" data-page="about.html">ABOUT</a>

在JavaScript中，

<script type="text/javascript">
    $(document).ready(function(){
        $('a').click(function(e){
            e.preventDefault();
            $('#main-content').load($(this).attr("data-page"));
            return false;
        });
    });
</script>

Plunker sample

Answer 2

试 about.html确保文件位于项目的根目录

<li><a href="./about.html">ABOUT</a></li>
<div class="col-sm-9 blog-main" id="main-content"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript">

$(document).ready(function(){
        $('a').click(function(event){
            event.preventDefault();
            $('#main-content').load($(this).attr("href"));
            return false;
        });
    });
</script>

Answer 3

您可以使用preventDefault来停止触发事件的默认操作。

<script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function(event){
                event.preventDefault();
                $('#main-content').load($(this).attr("href"));
                return false;
            });
        });
</script>

Answer 4

<script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function(){
                $('#main-content').load($(this).attr("href") + ' #elementSelectorThatYouWantToLoad');
                return false;
            });
        });
</script>

您必须指定要加载的DOM元素，

$('#main-content').load($(this).attr('about.html #body');

jQuery - AJAX load（）方法不起作用

4 个答案: