Question

太棒了！

我只是想说，我真的非常喜欢JavaScript，JQuery，AJAX以及所有这些，所以我可能不理解我已经搜索过的答案。如果是这种情况，那么我真正想要的就是有人愚蠢地完成白痴，因为我只是没有得到它。

H'okay。我尝试做的是阻止我的网站访问者每次点击导航栏中的链接时都必须重新加载页面。我希望导航div中的链接替换我的主<div>中的内容，并且我希望我的“主页”指向一个XML文件，其中我有“更新”（有点像博客，不是博客）。

这是我的页面代码：

<div class="nav"> 
    <h1>navigation</h1>
        <ul>
        <!-- I want these links' content...-->
            <li><a href="#">Home Page(this one is to be an XML)</a></li>
            <li><a href="#">Test Link 1</a></li>
            <li><a href="#">Test Link 2</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div>

<div class="main">
<!--... to show here! -->
     <p>Bloop! New stuff here.</p>
</div>

有人可以，请用英语向我解释一下吗？我已经哭了一个小时，因为我无法弄明白。

Answer 1

因此，如果我理解正确，您想要做什么...更改div的内容（类名为＆＃34; main＆＃34;，只要用户点击链接？

如果我在纯javascript（没有框架）中执行此操作...我会执行以下操作：

在导航中为列表项分配ID如下：

<ul>
    <!-- I want these links' content...-->
        <li id="home-nav"> <a href="#">Home Page(this one is to be an XML)</a></li>
        <li id="test1-nav"> <a href="#">Test Link 1</a></li>
        <li id="test2-nav"> <a href="#">Test Link 2</a></li>
        <li id="contact-nav"> <a href="#">Contact</a></li>
    </ul>

接下来，您可以继续删除锚标记，并且您将要为导航项添加onclick功能。

<ul>
    <!-- I want these links' content...-->
        <li id="home-nav"
            onclick="navigate('home-nav')"> 
             Home Page(this one is to be an XML)</li>
    </ul>

注意我是如何添加＆＃39; home-nav＆＃39;我添加了导航的onclick功能，传入了主页导航功能。作为参数。接下来，您需要在javascript中编写该函数。

function navigate(link){
  //Set the link to active
  document.getElementById(link).classList += "active";

 //Change data in the main div
 var main = document.getElementsById('main');
 main.innerHTML = "<p>Whatever you want the HTML to be.</p>
}

最后，不要使用＆＃34; main＆＃34; class ...让它成为一个id ......上面的代码会提出一些你需要解决的问题，但它会让你开始。希望它有所帮助。

另外，如果你需要学习Javascript基础知识，我最近做了一个教授JS Basics的代码系列，这里是：

https://www.youtube.com/playlist?list=PL-4zzaVqc2ajx1dwggBv04D1ns9JBrosv

Answer 2

使用jQuery .remove（）和 .append（）。看：

<ul>        
        <li><a id="link1" href="#">Test Link 1</a></li>
        <li><a id="link2" href="#">Test Link 2</a></li>            
    </ul>

jQuery的：

$("#link1").click(function(){
    $(".main").children().remove();
    $(".main").append("<p>Link 1 Stuff !</p>");
})
$("#link2").click(function(){
    $(".main").children().remove();
    $(".main").append("<p>Link 2 Stuff !</p>");
})

从另一个div

2 个答案: