堆棧內存溢出
  簡體   English   中英

單擊另一個div切換div

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

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

問題描述

我想知道當我單擊另一個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會逐漸淡入，其速度類似於大圓圈的速度。

1 個解決方案

解決方案1
 1 已采納  2014-04-03 18:58:21

想法

創建內容的容器。 此容器中應為內容填充div，並且容器中的每個div都應獲取內容類。 此外，容器中的每個div都需要和唯一的ID。 向每個應該觸發內容更改的圈子添加一個類，但對每個圈子使用相同的類（例如trigger或circle ）。 下一步是具體指定應加載到data-xx屬性中的內容，並使用之前在content div中指定的ID作為標識符，例如data-id或data-content 。
現在談到Javascript。 使用您添加到觸發器中的類注冊click event 。 現在觸發事件時，通過在內容類上調用.fadeOut()淡出當前內容。 之后通過jQuerys獲得發件人 this和使用接收的內容ID .data的功能。 現在，我們可以在引發click event的元素上調用.fadeIn() ， click event完成。

履行

調整觸發器 

<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-sheet中為此定義一個規則。 

.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(){
});

在類trigger上注冊所有元素的click event 。 當用戶單擊元素之一時，將執行該函數中的所有內容。 

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

淡出具有id content每個元素。 和 

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

淡入與data-content屬性中指定的ID匹配的元素。

請注意，您詛咒您必須在文檔的<head>部分中包含jQuery。 示例包括： 

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

完成

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 單擊時在div中切換字符 單擊時切換Div內容 切換div需要2次點擊。 應該是1點擊 單擊鏈接時切換div顯示狀態 單擊使用Javascript切換div的背景圖像 Jquery在按鈕點擊時切換div - 不切換 使用.toggle（）在一個div上切換另一個div 用另一個div切換一個div 單擊一個 div 以激活其他 div 切換DIV中顯示的值，取決於執行單擊的DIV
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM