javascript - 在不同的 div 中加载左侧导航的链接内容

Question

我有顶部导航，左侧导航，其链接由点击顶部导航链接驱动，页面本身是两列布局，左侧导航和内容容器，顶部导航

 <div id="topnav">Topic1 | Topic 2 | Topic 3</div>

    <div id="navigation">
      <!--all links from topic1 by default, or topic 2 links if topic 2 clicked-->
        <a href="home.html">Home</a>
        <a href="pictures.html">Picture</a>
    </div>
    <div id="content">
         <!-- content will load here -->
    </div>

当我点击主题 1 时，属于主题 1 的所有链接都应该加载到左侧导航栏中，并且 当我单击图片时，我的图片应该加载到#content 中。 我如何在 jquery 或 javascript 中执行此操作？ 请帮助..jquery新手在这里..

Answer 1

HTML

<a class="loader" href="home.html">Link 1</a>
<div id="content"></div>

JavaScript(使用 jQuery)

$('a.loader').on('click', function(e) {
    e.preventDefault();
    $('#content').load($(this).attr('href'));
});

正如@Musa 所说，您加载的 URL 应该在您自己的域中。