具有多个类的ToggleClass

Question

我正在尝试使用jquery的hide和toggleclass函数在页面元素之间切换。它一半有效，但当从一个到另一个时，它会切换主页内容类。

例如，如果单击“立即购买”，它会正确删除主页内容类项并显示buynow类项。

但是，如果您再单击另一个页面，例如“问题”，则会显示主页内容类项目（我不想要），然后显示下面的问题类项目。

我只希望在没有显示其他页面时显示mainpagecontent类项目。

这是我的jsfiddle - https://jsfiddle.net/jamesthemonkeh/to7tLLde/。

这是有问题的jquery部分：

$("#contactpage").click(function() {
    $('.mainpagecontent').fadeOut("50000");
    $('.whoareyoupage').hide("slow");
    $('.buynow').hide("slow");
    $('.questionspage').hide("slow");
    $('.contactpage').slideToggle("slow");
});
    $("#contactpage2").click(function() {
    $('.mainpagecontent').fadeOut("50000");
    $('.whoareyoupage').hide("slow");
    $('.buynow').hide("slow");
    $('.questionspage').hide("slow");
    $('.contactpage').slideToggle("slow");
});
$("#whoareyoupage").click(function() {
    $('.mainpagecontent').fadeOut("50000");
    $('.contactpage').hide("slow");
    $('.buynow').hide("slow");
    $('.questionspage').hide("slow");
    $('.whoareyoupage').slideToggle("slow");
});
$("#buynow").click(function() {
    $('.mainpagecontent').fadeOut("50000");
    $('.contactpage').hide("slow");
    $('.whoareyoupage').hide("slow");
    $('.questionspage').hide("slow");
    $('.bigbutton').hide("slow");
    $('.buynow').slideToggle("slow");
});
$("#buynow2").click(function() {
    $('.mainpagecontent').fadeOut("50000");
    $('.contactpage').hide("slow");
    $('.whoareyoupage').hide("slow");
    $('.questionspage').hide("slow");
    $('.bigbutton').hide("slow");
    $('.buynow').slideToggle("slow");
});
$("#questionspage").click(function() {
    $('.mainpagecontent').fadeOut("50000");
    $('.contactpage').hide("slow");
    $('.whoareyoupage').hide("slow");
    $('.buynow').hide("slow");
    $('.questionspage').slideToggle("slow");
});

function contactForm(){
  var isOpen = false;

  function toggleContactForm() {
    if (isOpen) {
      $('.mainpagecontent').fadeIn("50000");
    } else {
      $('.mainpagecontent').fadeOut("50000");
    }
    isOpen = !isOpen;
  }

    $('#contactpage').on('click', toggleContactForm);
    $('#whoareyoupage').on('click', toggleContactForm);
    $('#buynow').on('click', toggleContactForm);
    $('#questionspage').on('click', toggleContactForm);
}

contactForm();    

有人可以提出建议吗？

由于 詹姆斯