1

我正在尝试做的事情：

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

每次我单击某个类别中的链接时，我都想淡入#rightSide该链接的内容。

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

任何帮助表示赞赏，不一定要调用。有没有人这叫什么，在不刷新页面的情况下加载内容？任何指针表示赞赏。

4

4 回答 4

3

有没有人这叫什么，在不刷新页面的情况下加载内容？

那是阿贾克斯。

至于您的问题，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 元素。

于 2012-06-07T20:36:27.600 回答
0

看一下加载方法。您将处理点击事件，通过 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;
});
于 2012-06-07T20:34:26.833 回答
0

一个非常基本的实现：

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

但是有一些事情，例如更新您的 URL 以及您需要考虑的事情。

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

于 2012-06-07T20:34:40.717 回答
0

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

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

这样做的好处是内容立即开始加载，而不是在右侧完成淡出时开始加载，并且内容在可用时立即开始淡入，而不是等待先前的内容淡出。

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

于 2012-06-07T20:57:44.623 回答