Question

我有一种从单独的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>

about.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>

JS

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

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

Answer 1

试试这个

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

<强> JS

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

Answer 2

$(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);
            }
        });
    });
});

Answer 3

您尝试做的简单示例：

$('[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;
});

http://jsfiddle.net/11111000000/syv2xv0w/

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

3 个答案: