文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >在另一个div的点击上切换div

问在另一个div的点击上切换div
EN

Stack Overflow用户
提问于 2014-04-02 08:36:39
回答 1查看 135关注 0票数 0

当我点击另一个div时，我很想知道如何切换div。例如，我有几个按钮，其中一个被称为“约”。现在，当我点击那个按钮时，我想要一个div在页面底部切换。我还想知道如何使它，以便如果用户单击一个不同的按钮，例如，“工作”，它切换有关页关闭和工作页上。我相信用jQuery可以做到这一点，但我对它完全没有经验。所有的帮助都非常感谢！

代码语言：javascript
运行
复制
<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

代码语言：javascript
运行
复制
/*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就会慢慢消失，其速度类似于大圆圈的速度。

javascript
css
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-03 18:58:21

思想

为内容创建一个容器。这个容器应该为您的内容填充div，容器中的每个div都应该得到内容类。此外，容器中的每个div都需要和唯一的ID。在每个应该触发内容更改的圆圈中添加一个类，但是对每个循环使用相同的类(例如trigger或circle)。下一步是指定应该加载到data-xx属性中的内容，并使用之前在content中指定的ID作为标识符，例如data-id或data-content。

现在轮到Javascript了。使用添加到触发器中的类注册一个click event。当事件现在触发时，通过调用内容类上的.fadeOut()来淡出当前内容。然后，通过jQuerys this获取发送方，并使用.data函数接收内容id。现在，我们可以对引发.fadeIn()的元素调用click event，这样就完成了。

Implementation

调整触发器

代码语言：javascript
运行
复制
<div id="about" class="trigger" data-content="contentAbout">
</div>

首先，我添加了类trigger，这样我们就可以为它处理click事件。

其次，我添加了data-content属性，因此我们知道以后应该显示哪些内容。

调整内容框

代码语言：javascript
运行
复制
<div id="contentAbout" class="content">
</div>

首先，我将div的id设置为它中的内容。content + About里面有什么。

其次，div需要知道它是一个内容div，所以添加类content。

内容持有者

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

代码语言：javascript
运行
复制
<div id="contentHolder">
    <!-- Content boxes go in here -->
</div>

CSS魔术

我们需要隐藏内容，直到它显示出来，所以在css-工作表中为它定义一个规则。

代码语言：javascript
运行
复制
.content {
    display: none;
}

这将隐藏内容框，直到我们淡出它们以后。

此外，我们需要调整内容持有人的位置，以便它将显示在底部。

示例：

代码语言：javascript
运行
复制
#contentHolder {
    position: absolute;
    bottom: -500px;
    height: 300px;
    width: 100%;
}

时间为真魔法

在完成所有的准备工作后，我们可以创建我们的Javascript，让我们的生活在我们的小东西。

代码语言：javascript
运行
复制
$(function() {
    $(".circle").click(function(){
        $(".content").fadeOut();
        $("#" + $(this).data("id")).fadeIn();
    });
});

​

​

代码语言：javascript
运行
复制
$(function() {
}

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

代码语言：javascript
运行
复制
$(".trigger").click(function(){
});

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

代码语言：javascript
运行
复制
$(".content").fadeOut();

使用id content淡出每个元素。和

代码语言：javascript
运行
复制
$("#" + $(this).data("content")).fadeIn();

在与data-content属性中指定的id匹配的元素中消失。

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

代码语言：javascript
运行
复制
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

完成

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/22805792

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档