1

我是新来的，我也是 jquery 的新手。我正在尝试制作一个带有background-fixed图像和顶部四个链接的网站，以访问每个页面，例如：关于，投资组合，联系人，画廊。应该是当我点击关于时，一个页面下拉，然后再次点击，第二个链接相同，所有链接都如此。我在 html 和 css 中编写了以下代码。我已经完成了一页，但不知道如何添加更多页面。

这是我的CSS：

body{
    margin:auto;
    padding:auto; 
}
#page{
    width:1000px;
    height:1000px;
    border:1px solid red;
    background-image:url('done3.jpg');
}
#panel{
    padding:50px;display:none;
}
#panel 
{
    padding:300px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3; 
}
#flip
{
    width:100px;
    padding:15px;
    text-align:center;
    background-color:pink;
    border:solid 1px #c3c3c3;
}

这是我的html：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script> 
            $(document).ready(function(){
                $("#flip").click(function(){
                    $("#panel").slideToggle("slow");
                });
            });
        </script>

        <link rel="stylesheet" type="text/css" href="style.css">
        <title>demo</title>
    </head>

    <body>
        <div id="page">
            <div id="flip">about us</div>
            <div id="panel">about us</div>
        </div>
    </body>
</html>
4

2 回答 2

1

您可以使用 设置当前滚动位置$(window).scrollTop(positionInPixels);并使用 获取网站上的元素位置.offset().top。将它们放在一起并假设$link是您的链接，并且$target是您要滚动到的目标：

$link.click(function(e) {
    e.preventDefault();

    if($(window).scrollTop() != $target.offset().top) {
        $(window).scrollTop($target.offset().top);
    } else {
        $(window).scrollTop(0);
    }

    return false;
}
于 2013-07-26T19:33:15.763 回答
1

如果你会有更多的“翻转”，那么你应该为 CSS 制作一个翻转类，并给每个类一个唯一的 ID。

CSS：

<style>
body
{
margin:auto;
padding:auto; 
}
#page 
{
width:1000px;
height:1000px;
border:1px solid red;
background-image:url('done3.jpg');
}
.panel
{padding:50px;display:none;
}
.panel 
{
padding:300px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3; 
}
.flip
{
width:100px;
padding:15px;
text-align:center;
background-color:pink;
border:solid 1px #c3c3c3;
}
</style>

HTML：

<div class="flip" id="flip">about us</div><div class="flip" id="flip2">about us2</div>
<div class="panel" id="panel">content</div>

<div class="panel"  id="panel2">content2</div>

您还需要在您的 javascript 中添加更多关于单击它时的操作。这是一个示例，但您应该使其更像一个函数，这样您就不会在每次“翻转”时复制和粘贴它。

<script> 
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});

});
</script>

这是一个部分工作的版本。可以有许多增强功能，但希望足以让您入门。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
$("#flipabout").click(function(){
$("#panelabout").slideToggle("slow");
});
$("#flipportfolio").click(function(){
$("#panelportfolio").slideToggle("slow");
});
$("#flipcontact").click(function(){
$("#panelcontact").slideToggle("slow");
});
$("#flipgallery").click(function(){
$("#panelgallery").slideToggle("slow");
});
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>demo</title>
<style>
body
{
margin:auto;
padding:auto; 
}
#page 
{
width:1000px;
height:1000px;
border:1px solid red;
background-image:url('done3.jpg');
}
.panel
{padding:50px;display:none;
}
.panel 
{
padding:300px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3; 
}
.flip
{
width:100px;
padding:15px;
text-align:center;
background-color:pink;
border:solid 1px #c3c3c3;
float: left;
}
</style>
</head>
<body>
<div  id="page">
<div class="flip" id="flipabout">about us</div>
<div class="flip" id="flipportfolio">portfolio</div>
<div class="flip" id="flipcontact">contact</div>
<div class="flip" id="flipgallery">gallery</div>
<div class="panel" id="panelabout">about...</div>
<div class="panel"  id="panelportfolio">Portfolio...</div>
<div class="panel"  id="panelcontact">contact...</div>
<div class="panel"  id="panelgallery">gallery....</div>
</div>
</body>
</html>
于 2013-07-26T19:34:36.020 回答