Javascript 如何加载多个链接jQuery内容

我找到了一种从单独的html文件加载内容的方法，但只对单个链接目标有用，如下代码所示：

index.html

<div class="nav-section" id="navID">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Follow</a></li>
  </ul>
</div>

 <div id="divID">Content A</div>

<div class="nav-section" id="navID">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Follow</a></li>
  </ul>
</div>

 <div id="divID">Content A</div>

我在index.html中有4个链接，它们试图从多个html文件（即example.html）加载，我需要一个解决方案来避免在JS中重复自己，而是根据链接目的地从不同的链接加载内容。我该怎么做呢？

像这样试试

<li><a href="" data-html="destination.html">Home</a></li>

---

您正在尝试做的简单示例：

$('[data-toggle="tabajax"]').click(function(e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    $.get(loadurl, function(data) {
        $(targ).html(data);
    });

    $this.tab('show');
    return false;
});

---

这实际上解决了我的问题，我很感激。非常感谢你！我必须承认这看起来很不错，值得一试。谢谢你的解决方案，伙计。

$(document).ready(function() {
    $('#navID ul li a').click(function() {
        var html=$(this).data('html');
        $('#divID').load(html+' #divID' + $(this).attr('href'));
        return false;
    });
});

$(document).ready(function() {
    $('#navID ul li a').click(function() {
        $.ajax({
            url: "some.php",
            success: function(data, status) {
                $('#divID').html(data);
            },
            error: function(response) {
                console.log(response);
            }
        });
    });
});

$('[data-toggle="tabajax"]').click(function(e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    $.get(loadurl, function(data) {
        $(targ).html(data);
    });

    $this.tab('show');
    return false;
});