堆栈内存溢出
  简体   繁体   English

单击另一个div切换div

[英]Toggling a div on the click of an other div

 原文  2014-04-02 08:36:39  7   1    javascript/ css/ html

问题描述

I would love to know how to toggle a div when I click on an other div. 我想知道当我单击另一个div时如何切换div。 For instance, I have couple of buttons, and one of them is called "about". 例如，我有几个按钮，其中一个称为“大约”。 Now, when I click on that button, I want a div to toggle on the bottom of the page. 现在，当我单击该按钮时，我希望div在页面底部切换。 I also would like to know how to make it so that if the user clicks on a different button, say, "work", it toggles the about page off and the work page on. 我还想知道如何做到这一点，以便如果用户单击一个不同的按钮（例如“工作”），它将切换“关于”页面和“工作”页面。 I believe it's possible to do this with jQuery, but I have absolutely zero experience with it. 我相信使用jQuery可以做到这一点，但是我对此绝对没有经验。 All help greatly appreciated! 所有帮助，不胜感激！

HTML 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 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;
}

Link for my small project: http://speedy.sh/V6fqw/project.zip 我的小型项目的链接： http : //speedy.sh/V6fqw/project.zip

JSFiddle (Thanks to Kimmax) JSFiddle （感谢Kimmax）

EDIT: So, as you can see on the right side, there are four buttons. 编辑：所以，正如您在右侧看到的，有四个按钮。 What I want is that if a user were to click on one of them, a div on the bottom of the page gently fades in, the speed of which similar to the speed of the large circle. 我想要的是，如果用户单击其中之一，则页面底部的div会逐渐淡入，其速度类似于大圆圈的速度。

1 个解决方案

解决方案1
 1 已采纳  2014-04-03 18:58:21

The Idea 想法

Create a container for the content. 创建内容的容器。 This container should be filled with divs for your content and every single div in the container should get the content class. 此容器中应为内容填充div，并且容器中的每个div都应获取内容类。 Also every single div in the container needs and unique ID. 此外，容器中的每个div都需要和唯一的ID。 Add a class to every circle that should trigger a content change, but use the same class for every circle (For example trigger or circle ). 向每个应该触发内容更改的圈子添加一个类，但对每个圈子使用相同的类（例如trigger或circle ）。 The next step is to specific the content which should be loaded in a data-xx attribute and use the ID you specified in the content divs before as identifier, as an example data-id or data-content . 下一步是具体指定应加载到data-xx属性中的内容，并使用之前在content div中指定的ID作为标识符，例如data-id或data-content 。
Now it comes to Javascript. 现在谈到Javascript。 Register an click event with the class you added to your triggers. 使用您添加到触发器中的类注册click event 。 When the event now fires, fade the current content out by calling .fadeOut() on the content class. 现在触发事件时，通过在内容类上调用.fadeOut()淡出当前内容。 After that get the sender via jQuerys this and receive the content-id by using the .data function. 之后通过jQuerys获得发件人 this和使用接收的内容ID .data的功能。 Now we can call .fadeIn() on the element that raised the click event and we are done. 现在，我们可以在引发click event的元素上调用.fadeIn() ， click event完成。

Implementation 履行

Adjust the triggers 调整触发器 

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

First I added the class trigger so we can handle click events for it. 首先，我添加了类trigger以便我们可以为其处理click事件。
Secondly I added the data-content attribute, so we know what content should be shown later. 其次，我添加了data-content属性，因此我们知道以后应该显示什么内容。

Adjust the content box 调整内容框 

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

Fist I set the id of the div to something that says whats in it. 拳头我将div的id设置为可以说明其内容的内容。 content + whats in it About . content +什么在它About 。
Secondly the div needs to know that its a content div so add the class content . 其次，div需要知道其内容div，因此添加类content 。

The content holder 内容持有人

All the content divs have to be holed together, so we need to wrap with another div. 必须将所有内容div放在一起，所以我们需要用另一个div包装。 

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

CSS magic CSS魔术

We need to hide the content until it should be shown, so define a rule in the css-sheet for that. 我们需要隐藏内容直到它显示出来，因此在css-sheet中为此定义一个规则。 

.content {
    display: none;
}

This will hide the content boxes until we fade them in later. 这将隐藏内容框，直到稍后将它们淡入。
Also we need adjust the position of the content-holder so it will be shown at the bottom. 另外，我们需要调整内容所有者的位置，以便将其显示在底部。
Example: 例： 

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

Time for the real magic 真正的魔术时间

After finishing all the preparatory work, we can create our Javascript to get life in our little thing. 在完成所有准备工作之后，我们可以创建我们的Javascript来实现生活中的小事。 

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


$(function() {
}

will be executed as soon as the page finished loading. 页面加载完成后将立即执行。 

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

registers an click event on all elements with the class trigger . 在类trigger上注册所有元素的click event 。 Everything in the function will be executed when the user clicks on one of the element. 当用户单击元素之一时，将执行该函数中的所有内容。 

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

fades out every element with the id content . 淡出具有id content每个元素。 And 和 

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

fades in the element that matches the id specified in the data-content attribute. 淡入与data-content属性中指定的ID匹配的元素。

Please note that you of curse have to include jQuery in the <head> section of your document. 请注意，您诅咒您必须在文档的<head>部分中包含jQuery。 Example include: 示例包括： 

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

Done 完成

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击时在div中切换字符 - Toggling character in div on click 单击时切换Div内容 - Toggling Div Content On Click 切换div需要2次点击。 应该是1点击 - Toggling div requires 2 clicks. Should be 1 click 单击链接时切换div显示状态 - Toggling div display state on click of links 单击使用Javascript切换div的背景图像 - Toggling the background image of div on click using Javascript Jquery在按钮点击时切换div - 不切换 - Jquery toggle div on button click - not toggling 使用.toggle（）在一个div上切换另一个div - Toggling one div on and the other off using .toggle() 用另一个div切换一个div - Toggling a div with another div 单击一个 div 以激活其他 div - Click on a div to activate other div 切换DIV中显示的值，取决于执行单击的DIV - Toggling the value displayed in a DIV depending on which DIV the click is performed
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM