0

以下脚本会将其他页面中的内容提取到DIV主页上指定的内容中。> 但是，我希望它能够将内容加载到离DIV中的链接最近的.links位置，其中有多个，每个都单独运行。这意味着，.links在页面顶部的链接 1 到 3 加载到DIV最靠近它的第一个，并且.links4-6 执行相同但在同一页面的不同区域。

更新我试图让每个 .class li 中的第一个链接.class + div最初加载。我还试图让每个元素单独工作，以便链接不会影响所有 div。

$(document).ready(function() {
    $('.links + div').load($('.links li a:first').attr('href'));
    $(document).on('click','.links li a:not(.noajax)',function(e)  {
        e.preventDefault();

        var $link = $(this),
            url = $link.attr('href');
        $link.closest('.links').next('div').fadeOut('fast').load('+ page +').fadeIn('slow');
    });
});

HTML

<ul class="links">
    <li><a href="one.php">One</a></li>
    <li><a href="two.php">Two</a></li>
</ul>
<div></div>


<ul class="links">
    <li><a href="Three.php">Three</a></li>
    <li><a href="Four.php">Four</a></li>
</ul>
<div></div>
4

1 回答 1

0

如果您使用的 HTML 结构是固定的，则有：

<ul class="links">
 ...
</ul>
<div></div>


<ul class="links">
 ...
</ul>
<div></div>

然后你可以使用：

$(document).ready(function() {
    $('.links + div').load('login.php')
    $(document).on('click','.links li a:not(.noajax)',function()  {
        /* code */
        $(this).closest('.links').next('div').fadeOut('fast').load('' + page + '.php').fadeIn('slow');
        /* code */
    });
});

如果 HTML 结构不固定，那么这样的事情会起作用：

<ul class="links" data-load-target="div1">
 ...
</ul>
<!-- HTML -->
<div id="div1"></div>


<ul class="links" data-load-target="div2">
 ...
</ul>
<!-- HTML -->
<div id="div2"></div>

jQuery

$(document).ready(function() {
    $('.links + div').load('login.php')
    $(document).on('click','.links li a:not(.noajax)',function()  {
        /* code */
        var loadTarget = $(this).closest('.links').data('load-target');
        if (loadTarget)
            $('#' + loadTarget).fadeOut('fast').load('' + page + '.php').fadeIn('slow');
        /* code */
    });
});

更新：

HTML

<ul class="links">
  <li><a href="login.php">Login</a>
</ul>
<div></div>

jQuery

$(document).ready(function() {
    $('.links + div').load('login.php')
    $(document).on('click','.links li a:not(.noajax)',function(e)  {
        e.preventDefault();

        var $link = $(this),
            url = $link.attr('href');
        $link.closest('.links').next('div').fadeOut('fast').load(url).fadeIn('slow');
        /* code */
    });
});
于 2013-08-13T07:33:42.767 回答