Question

下面的代码可以正常工作，但我想知道是否有一个更简化的代码，我可以用于所有那些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/

Answer 1

而不是你的班级.about，.contact，.folio

尝试单线功能启动

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

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

jQuery内容幻灯片（适用但寻找更简单的解决方案）

1 个答案: