Question

我试图点击一个链接，使用jquery（.load）在一个框内显示一个不同的页面。我是编程和网页设计的新手，所以请尽可能简单地回答。

这是我的index.html代码

<nav id="navBar">
    <a href="#" onclick="homeLoad()" class="navLink">Home</a>          
    <a href="#" onclick="aboutLoad()" class="navLink">About</a>            
    <a href="#" onclick="contactLoad()" class="navLink">Contact</a>  
    <a href="#" onclick="shopLoad()" class="navLink">Shop</a> 
</nav>
<div id="loadZone"></div>

和我的JavaScript

$(document).ready(function(){
    $("#loadZone").load("homeLoad.html");
});
function homeLoad() {
    $('#loadZone').load('homeLoad.html');
}

function aboutLoad() {
    $('#loadZone').load('aboutLoad.html');
}

加载主页（homeLoad.html）工作正常当我反复垃圾链接时，你偶尔可以看到aboutLoad.html的内容

任何帮助表示赞赏感谢

Answer 1

更简单的方法可能是将URL作为数据属性存储在链接上，然后当用户单击链接时获取存储的URL并加载它。要加载初始内容，请在加载时触发对其链接的单击。像这样的东西会起作用：

Here is a working Demo

<nav id="navBar">
    <a href="#" data-url="home.html" class="navLink">Home</a>          
    <a href="#" data-url="about.html" class="navLink">About</a>            
    <a href="#" data-url="contact.html" class="navLink">Contact</a>  
    <a href="#" data-url="shop.html" class="navLink">Shop</a> 
</nav>
<div id="loadZone"></div>


<script>
$(document).ready(function(){
    $('.navLink').click(function(e){
        e.preventDefault;
        $('#loadZone').load($(this).data('url'));
    });
    $('.navLink:eq(0)').click();
});
</script>

Javascript将内容加载到Div问题中

1 个答案: