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 に答える