0

我正在尝试创建一个两列页面，其中单击左侧的链接将导致来自另一个 URL（在同一域上）的内容水平向右滑动。

这个小提琴是我目标的一个很好的例子。

我无法弄清楚的是如何使用此脚本加载外部内容。jQuery.load(url);似乎是实现这一目标的理想方式，但我无法让它与上面小提琴中显示的 jQuery 一起工作。

有谁知道这是否可以做到，或者是否有更好的方法来达到同样的效果？

下面的小提琴代码。

HTML：

<div id="left">
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>

<div id="right">
    <div class="panel" id="target1" style="background:green">Target 1</div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
    <div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

脚本：

jQuery(function($) {
    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);
            };

        if (!$target.hasClass('active') && $other.length > 0) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: -$this.width()
                }, 500, animIn);
            });
        } else if (!$target.hasClass('active')) {
            animIn();
        }
    });

});

CSS：

#left, #right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}
4

2 回答 2

0

如果您请求的内容尚未出现在页面上，最好添加一个服务器端组件（php、ruby 等），您可以请求第二条内容并让服务器将其发回。

IE

$("#target1).click(function(){
$.ajax({
url: "your-script.php", 
data: {target: "send-target-one-please"}, 
success: function(){
//append your second piece of content here
}
}); 
});

然后在你的脚本（php）中：

function someFunction(){
//get your content here
$myContent = file_get_contents('../path/to/my/file'); 
echo json_encode($myContent); 
}

显然这是伪代码，但它的一般思想

于 2013-04-09T23:46:27.753 回答
0

您可以更改animIn功能以加载内容：

animIn = function () {
    $target.load(URL, function() {
        $target.addClass('active').show().css({
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    });
};

只需替换URL为实际的 URL。

更新：这是完整的代码：

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.load('/echo/html/', {delay:0.5,html:$target.text()}, function() {
                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);
            });
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

});
于 2013-04-09T23:54:52.983 回答