0

我正在开发一个具有左侧链接和右侧内容区域的站点。我想让它像这个网站一样使用 jquery 滑入和滑出：http ://www.templatemonster.com/demo/44960.html

这是我当前的代码（可以让 jFiddle 工作吗？）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body { 
        /**background-image: url(../img/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        **/
        background-color: red; 
        background-image: url(img/bg.jpg);
        font-family:Arial, Helvetica, sans-serif;
        height: 100%; margin: 0; width: 100%;
}
html,body { height:100%; }
#left {
    position: relative;
    margin: 0 5px 0 0;
    overflow: hidden;
    float: left;
    width: 220px;
    background-image: url(img/panel_bg.png);
    background-repeat: repeat-y;
    height: 100%;
}
#right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    width: 630px;
    height: 100%;
    overflow: hidden;
}

div.panel {
    position: absolute;
    float: left;
    height: 100%;
    width: 620px;
    margin-left: 10px;
    background-image: url(img/content_bg.png);
    background-repeat: repeat-y;
    display: none;
}
</style>
<script type="text/Javascript">
jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');

        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
                $($target).hide();
            });

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

        }
    });

});
</script>
</head>

<body>
<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">Target 1</div>
    <div class="panel" id="target2">Target 2</div>
    <div class="panel" id="target3">Target 3</div>
</div>
</body>
</html>

任何帮助将非常感激！

4

2 回答 2

1

通过一些 CSS 更改，我让它几乎按预期工作。我只是position:fixed在菜单和position:absolute滑动区域上使用过。我更改了幻灯片上的背景颜色以确保其正常工作。我没有碰你的jQuery。http://jsfiddle.net/T7LzN/2/

于 2013-06-12T17:28:18.130 回答
0

我已经更新了您的代码以使内容滑入和滑出。我更改了一些样式以使其在 jsfiddle 中看起来更清晰，因为我没有您的背景图片。

我将您的 jQuery 变量更改为在开头不使用 $ （个人喜好），但除此之外它是相同的。我删除了链接上的“面板”类，并更改了在左右 div 上设置浮动的方式。

 <a href="#target1">Target 1</a><br/>
于 2013-06-12T17:30:47.660 回答