使用Jquery变量使不同的DIV出现和消失

Question

我有一个在启动页面上有4个div的网页。当页面首次加载时，只有主div可见，其他三个都被隐藏。

有一些按钮连接到jquery点击事件，使当前可见的div“蒸发”，并使用户选择的div“显示”。

截至目前，每个按钮都有自己的整个jquery click事件，旧的div名称为“蒸发”，新的div名称“直接”硬编码到其中。

这似乎是不必要的重复代码。

我想要一个单独的jquery click事件，它只接受两个字符串变量，一个字符串变量代表旧div“蒸发”，一个字符串变量代表新div“显示”然后每个html按钮都有存储在其中的两个字符串变量。

我在语法上不知道如何做到这一点。

        <div id="homeDiv">HOME PAGE CONTENT</div>

        <div id="contactDiv">CONTACT CONTENT</div>

        <div id="resumeDiv">RESUME CONTENT</div>

        <div id="portfolioDiv">PORTFOLIO CONTENT</div>

<script>

     $('#contactButton').click(function() {

          $('#homePage').addClass('blur-out-expand-fwd');

          setTimeout(function() {

            $('#homePage').hide();
            $('#contactPage').show();
            $('#contactPage').addClass('focus-in-contract-bck');

          }, 500);

        });


        $('#contactHomeButton').click(function() {

          $('#contactPage').addClass('blur-out-expand-fwd');

          setTimeout(function() {

            $('#contactPage').hide();
            $('#homePage').show();
            $('#homePage').addClass('focus-in-contract-bck');

          }, 500);

        });

 </script>

Answer 1

我找到了一个解决方案：

给所有按钮一个“navButton”类，然后将其附加到jquery click事件，然后每个按钮元素都有一个oldDiv属性和一个newDiv属性，由click事件读取，如下所示：

联系

$（ 'navButton'）。点击（函数（）{

 var oldDiv = "#" + $(this).attr("oldDiv");
 var newDiv = "#" + $(this).attr("newDiv");

$(oldDiv).addClass('blur-out-expand-fwd');
$(oldDiv).removeClass('focus-in-contract-bck');
$(newDiv).removeClass('blur-out-expand-fwd');
$(newDiv).removeClass('focus-in-contract-bck');

setTimeout(function(){

    $(oldDiv).hide();
    $(newDiv).show();
    $(newDiv).addClass('focus-in-contract-bck');

},500  );

});