在点击其他div时切换div

Question

我很想知道当我点击其他div时如何切换div。例如，我有几个按钮，其中一个被称为“约”。现在，当我点击该按钮时，我想要在页面底部切换div。我也想知道如何制作它，以便如果用户点击另一个按钮，例如“工作”，它会关闭关闭页面和工作页面。我相信用jQuery可以做到这一点，但我绝对没有经验。所有人都非常感谢！

HTML

<div id="mainmenu">
    <p id="welcome1">Welcome to my website.</p>
    <p id="welcome2">Please click on one of the smaller circles.</p>
    <div id="mainmenubg"></div>

    <div id="about">
        <p id="about1">ABOUT</p>
        <div class="bg"></div>
    </div>



    <div id="work">
        <p id="work1">WORK</p>
        <div class="bg"></div>
    </div>


    <div id="school">
        <p id="school1">SCHOOL</p>
        <div class="bg"></div>
    </div>


    <div id="contact">
        <p id="contact1">CONTACT</p>
        <div class="bg"></div>
    </div>
</div>

CSS

/*The biggest parts in this style sheet are the animation codes. They take up the most, because they are compatible with almost all (updated) browsers.*/ 

/*Let's give that sucker a background image first.*/
body 
{
background-image:url('bg.png');
}

#mainmenu{
  animation: mainmenu ease 2s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: mainmenu ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: mainmenu ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: mainmenu ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: mainmenu ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

  /*Normal properties start here*/
    border-radius: 50%/50%;
    border-style:solid; 
    border-width:106px;
    border-color: #636363;
    width: 400px;
    height: 400px;
    xbackground: white;

    z-index:9001;


    position:absolute;
    left:100px;
    top:100px;
}

@keyframes mainmenu{
  0% {
    opacity:0;
    transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes mainmenu{
  0% {
    opacity:0;
    -moz-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes mainmenu {
  0% {
    opacity:0;
    -webkit-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes mainmenu {
  0% {
    opacity:0;
    -o-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes mainmenu {
  0% {
    opacity:0;
    -ms-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#about{
  animation: about ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: about ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: about ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: about ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: about ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:500px;
    top:-100px;
}

@keyframes about{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes about{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -moz-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes about {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -webkit-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes about {
  0% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -o-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes about {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -ms-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#work{
  animation: work ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: work ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: work ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: work ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: work ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:550px;
    top:50px;
}

@keyframes work{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes work{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -moz-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes work {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -webkit-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes work {
  0% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -o-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes work {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -ms-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#school{
  animation: school ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: school ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: school ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: school ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: school ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:550px;
    top:210px;
}

@keyframes school{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes school{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -moz-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes school {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -webkit-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes school {
  0% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -o-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes school {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -ms-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#contact{
  animation: contact ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: contact ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: contact ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: contact ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: contact ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:500px;
    top:360px;    

}

@keyframes contact{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes contact{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes contact {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes contact {
  0% {

    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes contact {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}




/*These are the large coloured circles around the buttons.*/
#mainmenubg{
    border-radius: 50%/50%;
    border-style:solid; 
    border-width:100px;
    border-color: #91A6BC;
    width: 406px;
    height: 406px;

    position:absolute;
    left:-103px;
    top:-103px;
}

/*Pay heed! This one here is a CLASS, not an ID!*/
.bg{
    border-radius: 50%/50%;
    border-style:solid; 
    border-width:5px;
    border-color: #91A6BC;
    width: 104px;
    height: 104px;

    position:absolute;
    left:-7px;
    top:-7px;
}




/*Below here are all the paragraphs and similiar things. They are all IDs.*/
#welcome1{
    font-size:35px;
    font-family: HelveticaNeue-UltraLight;
    letter-spacing: 5px;
    color:#404040;

    width:300px;

    position:absolute;
    top:30px;
    left:50px;
    text-align:center;
}


#welcome2{
    font-size:25px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 3px;
    color:#7A7A7A;

    width:300px;

    position:absolute;
    top:150px;
    left:50px;
    text-align:center;
}


#about1{
    font-size:25px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 2px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:10px;
    left:6px;
}


#work1{
    font-size:25px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 2px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:10px;
    left:10px;
}


#school1{
    font-size:22px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 1px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:15px;
    left:3px;
}


#contact1{
    font-size:20px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 1px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:19px;
    left:3px;
}

我的小项目的链接：http://speedy.sh/V6fqw/project.zip

JSFiddle（感谢Kimmax）

编辑：所以，正如你在右侧看到的，有四个按钮。我想要的是，如果用户点击其中一个，页面底部的div轻轻淡入，其速度类似于大圆的速度。

Answer 1

想法

为内容创建容器。这个容器应该用你的内容填充div，容器中的每个div都应该得到内容类。此外，容器中的每个div都需要唯一的ID。为应该触发内容更改的每个圈子添加一个类，但为每个圈子使用相同的类（例如trigger或circle）。下一步是指定应加载到data-xx属性中的内容，并使用您在内容div中指定的ID作为标识符，作为示例data-id或data-content。<登记/> 现在谈到Javascript。在您添加到触发器中的类中注册click event。当事件现在触发时，通过调用内容类上的.fadeOut()来淡出当前内容。之后通过jQuerys this获取发件人，并使用.data函数接收content-id。现在我们可以在引发click event的元素上调用.fadeIn()，我们就完成了。

<强>实施

调整触发器

<div id="about" class="trigger" data-content="contentAbout">
</div>

首先我添加了课程trigger，以便我们可以为它处理click个事件 其次，我添加了data-content属性，因此我们知道后面应该显示哪些内容。

调整内容框

<div id="contentAbout" class="content">
</div>

拳头我将div的id设置为说明其中的内容。 content +其中有什么About 其次，div需要知道它的内容div，所以添加类content。

内容持有人

所有内容div必须在一起，所以我们需要用另一个div包装。

<div id="contentHolder">
    <!-- Content boxes go in here -->
</div>

CSS魔力

我们需要隐藏内容，直到它应该被显示，因此在css表中定义一个规则。

.content {
    display: none;
}

这将隐藏内容框，直到我们稍后淡出它们为止 我们还需要调整内容持有者的位置，以便在底部显示 例如：

#contentHolder {
    position: absolute;
    bottom: -500px;
    height: 300px;
    width: 100%;
}

真正的魔法时间

完成所有准备工作后，我们可以创建我们的Javascript以获得生活中的小事。

$(function() {
    $(".circle").click(function(){
        $(".content").fadeOut();
        $("#" + $(this).data("id")).fadeIn();
    });
});

$(function() {
}

将在页面加载完毕后立即执行。

$(".trigger").click(function(){
});

在类click event的所有元素上注册trigger。当用户点击其中一个元素时，函数中的所有内容都将被执行。

$(".content").fadeOut();

淡出标识为content的每个元素。和

$("#" + $(this).data("content")).fadeIn();

淡化与data-content属性中指定的id匹配的元素。

请注意，您的诅咒必须在文档的<head>部分中包含jQuery。示例包括：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

完成