Javascript 使用Jquery变量使不同的div显示和消失

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

有一些按钮连接到jqueryclick事件，以使当前可见的div蒸发并显示用户选择的div

到目前为止，每个按钮都有自己的整个jqueryclick事件，其中旧的div名称将消失，新的div名称将直接硬编码到其中

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

我希望有一个jqueryclick事件，它只接受两个字符串变量，一个字符串变量表示要蒸发的旧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>

---

我想出了一个解决办法：

给所有按钮一个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  );

---

})

请停止在帖子中插入您的网站。这是垃圾邮件。你应该提供一个链接，而不需要远程链接。你的HTML还有更多我们可以看到的吗？也许是一些父元素？