在 html 页面中重新加载单个 div [关闭]答案

【问题标题】：Reloading a single div in an html page [closed]在 html 页面中重新加载单个 div [关闭]
【发布时间】：2017-12-27 23:50:46
【问题描述】：

我的页面左侧有一个 div，其中包含一个导航。但是，当用户单击链接时，它只会更改我页面右侧的内容。有没有办法只在点击链接时加载右侧？例如，当单击“navPanel”中的链接时，“contentPanel”应重新加载该链接上的内容。

<nav id="navPanel">
   <a>link 1</a>
   <a>link 2</a>
   <a>link 3</a>
</nav>

<div id="contentPanel">
   <p>Content</p>
</div>

【问题讨论】：

您需要提供代码示例，html和javascript。否则我只是猜测。
也许阅读how to ask a question 上的指南并添加代码示例以便人们可以帮助您。
对于其他人来说，问题需要更多信息，但建议查看 AJAX 以加载新内容。
AJAX
这是一个可接受的网站“额外”功能，但请确保您的链接（link2、link3 等）在直接输入浏览器时正常工作。此外，如果您想点击链接 2，然后在浏览器中为该页面添加书签，您会遇到麻烦。

标签： javascript jquery html css

【解决方案1】：

是的，您可以使用名为 load() 的 jQuery 函数。

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
$( function() {
    $(document).on("click", "#navPanel a", function(){
        var link = $(this).attr('rel');  
        $("#contentPanel").load(link+" #contentPanel > *");
    });
});
</script>

<nav id="navPanel">
   <a rel='link.html'>link 1</a>
   <a rel='link.html'>link 2</a>
   <a rel='link.html'>link 3</a>
</nav>

<div id="contentPanel">
   <p>Content</p>
</div>

【讨论】：

他使用 javascript 作为标签。这就是初学者。另外，我说我将使用一个工作示例进行编辑。只是在等待 HTML 来解决这个问题。单击时在 div 中加载一些 HTML 几乎是 jQuery 的基本功能。
我知道基本的javascript，目前正在自学，我也会看看jQuery。
非常感谢！今晚我将研究 jQuery 并应用它！
Np 接受答案，如果您有具体问题，请告诉我。