Question

我正在尝试做什么：

#leftSide          #rightSide (display:none)
 _______________ _______________________________________________
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |              content                          |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|_______________|_______________________________________________|

每次点击某个类别中的链接时，我都希望使用该链接的内容淡入#rightSide。

我知道如何在onclick中淡出它，但我不知道如何在没有页面刷新的情况下每次加载新内容。

任何帮助表示赞赏，不一定被称为。有没有人这样称呼，加载内容没有页面刷新？任何指针都赞赏。

Answer 1

是否有人调用此内容，加载没有页面的内容刷新？

那是Ajax。

至于您的问题，请将rel属性分配给左侧边栏上的链接：

<a href="#" rel="div_1">Link 1</a>
<a href="#" rel="div_2">Link 2</a>
<a href="#" rel="div_3">Link 3</a>

然后将id分配给div个元素（假设在您的内容区域内），为每个与rel属性具有相同值的链接分配：

<div id="div_1">Div 1</a>
<div id="div_2">Div 2</a>
<div id="div_3">Div 3</a>

现在使用jQuery，你只需要：

$('a[rel^=div]').click(function(){
  $('#' + this.rel).fadeIn();
});

这样当单击链接时，jQuery将读取其值并在您的内容区域中显示相应的div元素。

Answer 2

查看load方法。您将处理click事件，通过AJAX / .load提取内容并应用您想要的任何效果。类似的东西：

$("link").click(function() {
    var $content = $("#rightSide");

    $content.fadeOut(1000, function() {
        // Load content after transition is completed
        $content.load("aUrl", function() {
            // Show content after content is fetched
            $content.fadeIn(1000);
        });
    }); 

    return false;
});

Answer 3

一个非常基本的实现：

$('#left-list').on('click', 'a:link', function(){
    var href = $(this).attr('href');
    $('#right-side').fadeOut(500, function(){
        $(this).load(href, function(){
            $(this).fadeIn(500);
        });
    });

    return false;
});

但有一些事情，例如更新您的网址以及您想要考虑的内容。

看看这篇文章：http://tutorialzine.com/2009/09/simple-ajax-website-jquery/ - 它包括使用jQuery加载内容，包括保留URL。

Answer 4

我会在淡出#rightSide的同时立即发送ajax请求，然后在新内容可用时立即开始淡出。

$("#leftSide").on("click","a[href]",function(e){
    e.preventDefault();
    $("#rightSide").stop(true,true).fadeOut();
    $.get(this.href).done(function(){
        $("#rightSide").stop(true,true).fadeIn();
    });
});

这样做的好处是内容立即开始加载，而不是在右侧完成淡出时，内容会在可用时立即开始淡出，而不是等待之前的内容淡出。 / p>

我不建议在这种情况下使用动画，但这是你的要求。

使用jQuery淡入网页

4 个答案: