Javascript 如何在单击侧边栏时更改内容

我在代码中有侧栏：

     <nav id="sidebar">


        <ul class="list-unstyled components">


            <li >
                <a href="#">Home</a>
            </li>

            <li>
                <a href="#">Page1</a>
            </li>

        </ul>


    </nav>

现在我想更改用户单击侧边栏按钮（主页或第1页）时的唯一内容

---

我已经为这两个内容（主页和第1页）准备了一个正文

尝试使用此代码。我在评论中写下了解释

//容器是要加载内容的选定元素
var container=document.querySelector（“#content”），
//这些是链接的选择器
linkHome=document.querySelector（“#link_uuhome”），
linkPage1=document.querySelector（'link#page1'）；
//加载内容的函数
函数loadContent（content）{
//AJAX请求
var xhr=new XMLHttpRequest（）；
xhr.open（'POST'，content，true）；
xhr.onload=函数（）{
var el=document.createElement（'div'）；
el.innerHTML=this.response；
container.empty（）
容器预弯（el）；
}
xhr.send（）；
}
//单击选择器后，它将启动加载内容的功能。在适当的位置输入文件的URL
linkHome.addEventListener（'click'，函数（e）{
loadContent（'/URL/TO/home.html'）；
e、 预防默认值（）；
});
linkPage1.addEventListener（'click'，函数（e）{
loadContent（'/URL/TO/page1.html'）；
e、 预防默认值（）；
});