0

下面的代码可以正常工作，但我想知道是否有更简化的代码可以用于所有这些 if 语句，也许调用单个函数？我试过了，但显然我需要根据按下的按钮跳过一个 if 语句。欢迎任何想法或评论。

<html>
<head>
<title>Slide_IN</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
<style type="text/css">
body{
    overflow:hidden;
}

#content_home {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#96C;
    top:200px;
}

#content_about {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#FF6633;
    top:200px;
}

#content_folio {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#CC0000;
    top:200px;
}

#content_contact {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#9C0;
    top:200px;
}
</style>
<script>

$(function(){
    $(".home").click(function() {
        if($('#content_about').css("left") == '10%'){
            $("#content_about").animate({'left':'-100%'}, "slow", function(){$('#content_about').removeAttr('style')});
        }
        if($('#content_folio').css("left") == '10%'){
            $("#content_folio").animate({'left':'-100%'}, "slow", function(){$('#content_folio').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_home").animate({'left':'10%'}, "slow");
    });

    $(".about").click(function() {
        if($('#content_home').css("left") == '10%'){
            $("#content_home").animate({'left':'-100%'}, "slow", function(){$('#content_home').removeAttr('style')});
        }
        if($('#content_folio').css("left") == '10%'){
            $("#content_folio").animate({'left':'-100%'}, "slow", function(){$('#content_folio').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_about").animate({'left':'10%'}, "slow");
    });

    $(".folio").click(function() {
        if($('#content_home').css("left") == '10%'){
            $("#content_home").animate({'left':'-100%'}, "slow", function(){$('#content_home').removeAttr('style')});
        }
        if($('#content_about').css("left") == '10%'){
            $("#content_about").animate({'left':'-100%'}, "slow", function(){$('#content_about').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_folio").animate({'left':'10%'}, "slow");
    });

    $(".contact").click(function() {
        if($('#content_home').css("left") == '10%'){
            $("#content_home").animate({'left':'-100%'}, "slow", function(){$('#content_home').removeAttr('style')});
        }
        if($('#content_about').css("left") == '10%'){
            $("#content_about").animate({'left':'-100%'}, "slow", function(){$('#content_about').removeAttr('style')});
        }
        if($('#content_folio').css("left") == '10%'){
            $("#content_folio").animate({'left':'-100%'}, "slow", function(){$('#content_folio').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_contact").animate({'left':'10%'}, "slow");
    });
});



</script>
</head>

<body>
<a class="home" href="#index">Home</a><br>
<a class="about" href="#about">About</a><br>
<a class="folio" href="#folio">Portfolio</a><br>
<a class="contact" href="#contact">Contact</a>
<div style="" id="content_home"> HOME Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
<div style="" id="content_about"> ABOUT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
<div style="" id="content_folio"> PORTFOLIO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
<div style="" id="content_contact"> CONTACT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
</body>
</html>

工作 jsFiddle：http: //jsfiddle.net/janey/LnDsE/

4

1 回答 1

0

而不是你的课程 .about,.contact,.folio

尝试作为单行功能开始

$(".about,.contact,.folio").click(){}

如果您在 jsfiddle 演示工作中有相同的内容，请分享。

于 2012-07-05T12:27:35.797 回答