1. 首頁
  2. 問答
  3. 使用不同div的內容切換

使用不同div的內容切換

2014-04-23 400 views
-2

我遇到問題需要交換div。基本上，我在頁面頂部有5個可點擊的div（鏈接）作爲水平導航欄佈局。在導航欄下方有5個單獨的div（內容），分別與每個單獨的鏈接（可點擊的div）相關聯，當您第一次訪問該頁面時，只有5個內容div中的一個顯示，另外4個隱藏，我希望它做什麼是當你點擊一個鏈接時，它顯示了該鏈接的內容並隱藏了其餘的內容div。如果這是有道理的。我新的jQuery的我似乎我無法得到它的工作，我已經竭盡所能，並找遍了整個網絡，試圖弄明白......請幫助使用不同div的內容切換

HTML

<div class="mPageWrapper"> 
<div class="mCurvyHead"> 
</div><!--End mCurvyHead--> 
<div class="mContentWrap"> 
    <div class="mPageWrap"> 
     <div id="mResumeLink"> 
       <center> 
       <h1>Learn About</h1> 
       <h2>Cory&nbsp;Sadler</h2> 
       </center> 
     </div> 
     <div id="mPhotographyLink"> 
       <center> 
       <h1>my Portfolio of:</h1> 
       <h2>Photography</h2> 
       </center> 
     </div> 
     <div id="mPrintLink"> 
       <center> 
       <h1>my Portfolio of:</h1> 
       <h2>Print&nbsp;Design</h2> 
       </center> 
     </div> 
     <div id="mWebLink"> 
       <center> 
       <h1>my Portfolio of:</h1> 
       <h2>Web&nbsp;Design</h2> 
       </center> 
     </div> 
     <div id="mResumeContent" > 
      <table class="mRContentHead"> 
       <tr> 
       <td> 
        <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png"></a> 
       </td> 

       </tr> 
      </table> 
     </div> 
     <div id="mPhotoContent" > 
      <table class="mPhotoContentHead"> 
       <tr> 
       <td> 
        <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png"></a> 
       </td> 

       </tr> 
      </table> 
     </div> 
     <div id="mPrintContent" > 
      <table class="mPrintContentHead"> 
       <tr> 
       <td> 
        <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png"></a> 
       </td> 

       </tr> 
      </table> 
     </div> 
     <div id="mWebContent" > 
      <table class="mWebContentHead"> 
       <tr> 
       <td> 
        <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png"></a> 
       </td> 

       </tr> 
      </table> 
     </div> 
     <div id="mContactContent" > 
      <table class="mContactContentHead"> 
       <tr> 
       <td> 
        <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png"></a> 
       </td> 
       <td> 
        <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png"></a> 
       </td> 

       </tr> 
      </table> 
     </div> 
    </div> 
</div>

CSS

.mPageWrapper{width:100%; height:2000px; position:relative; top:-180px; display:block; margin:0 auto; background-color:#fff;} 

.mCurvyHead { 
    width:100%; 
    height:62px; 
    position:relative; 
    top:-52px; 
    display:block; 
    background:transparent url('../img/WalkingWithCory-mPageHeader.png') top center no-repeat; 
    z-index: 15; 
} 
/* all Pages & Links Wrap */ 
.mContentWrap { 
    width:100%; 
    height:5px; 
    position:absolute; 
    top:11px; 
    display:block; 
    z-index: 10; 
    margin:0 auto; 
    background: url('../img/wWcS-HeaderBG-LtGray.png') top left repeat-x; 
    Padding:0px; 
} 
    .mPageWrap {width:100%; height:100%; position:absolute; left:0px; top:67px; display:block; z-index: 14;} 
     #mResumeLink{ width:17%; height:67px; position:absolute; top:-69px; display:block; z-index: 14; left:08%; background:transparent url('../img/wWcS-HeaderBG-Gray.png') 100% 100% repeat-x; }   
     #mPhotographyLink{ width:17%; height:67px; position:absolute; top:-69px; display:block; z-index: 14; left:25%; background:transparent url('../img/wWcS-HeaderBG-Green.png') 100% 100% repeat-x; } 
     #mPrintLink{ width:17%; height:67px; position:absolute; top:-69px; display:block; z-index: 14; left:42%; background:transparent url('../img/wWcS-HeaderBG-Blue.png') 100% 100% repeat-x; }  
     #mWebLink{ width:17%; height:67px; position:absolute; top:-69px; display:block; z-index: 14; left:59%; background:transparent url('../img/wWcS-HeaderBG-LtGreen.png') 100% 100% repeat-x; } 
     #mContactLink{ width:17%; height:67px; position:absolute; top:-69px; display:block; z-index: 14; left:76%; background:transparent url('../img/wWcS-HeaderBG-LtBlue.png') 100% 100% repeat-x; } 



     #mResumeLink:hover{ left:08%; background:transparent url('../img/wWcS-HeaderBG-Gray02.png') 100% 100% repeat-x; cursor:pointer;} 
     #mPhotographyLink:hover{ left:25%; background:transparent url('../img/wWcS-HeaderBG-Green02.png') 100% 100% repeat-x; cursor:pointer;} 
     #mPrintLink:hover{ left:42%; background:transparent url('../img/wWcS-HeaderBG-Blue02.png') 100% 100% repeat-x; cursor:pointer;} 
     #mWebLink:hover{ left:59%; background:transparent url('../img/wWcS-HeaderBG-LtGreen02.png') 100% 100% repeat-x; cursor:pointer;} 
     #mContactLink:hover{left:76%; background:transparent url('../img/wWcS-HeaderBG-LtBlue02.png') 100% 100% repeat-x; cursor:pointer;} 

     #mResumeLink:hover h1 {font-family: 'Franklin Gothic ITALIC'; font-size:15px; font-style:italic; color:#bbbbbb; line-height:1px;}   
     #mPhotographyLink:hover h1 {font-family: 'Franklin Gothic ITALIC'; font-size:15px; font-style:italic; color:#bbbbbb; line-height:1px;} 
     #mPrintLink:hover h1 {font-family: 'Franklin Gothic ITALIC'; font-size:15px; font-style:italic; color:#bbbbbb; line-height:1px;}   
     #mWebLink:hover h1 {font-family: 'Franklin Gothic ITALIC'; font-size:15px; font-style:italic; color:#bbbbbb; line-height:1px;}   
     #mContactLink:hover h1 {font-family: 'Franklin Gothic ITALIC'; font-size:15px; font-style:italic; color:#bbbbbb; line-height:1px;} 

     #mResumeLink:hover h2 {font-family: 'Georgia Ref'; top:5px; font-size:27px; font-style:italic; color:#bbbbbb; line-height:1px; cursor:pointer;}   
     #mPhotographyLink:hover h2 {font-family: 'Georgia Ref'; top:5px; font-size:27px; font-style:italic; color:#bbbbbb; line-height:1px; cursor:pointer;}   
     #mPrintLink:hover h2 {font-family: 'Georgia Ref'; top:5px; font-size:27px; font-style:italic; color:#bbbbbb; line-height:1px; cursor:pointer;}   
     #mWebLink:hover h2 {font-family: 'Georgia Ref'; top:5px; font-size:27px; font-style:italic; color:#bbbbbb; line-height:1px; cursor:pointer;}   
     #mContactLink:hover h2 {font-family: 'Georgia Ref'; top:5px; font-size:27px; font-style:italic; color:#bbbbbb; line-height:1px; cursor:pointer;} 
     h2 {font-family: 'Georgia Ref'; font-size:27px; font-style:italic; color:#000; line-height:1px;} 

    #mResumeContent { width:100%; height:100%; float:left; position:absolute; top:-2px; transition: all 2s linear; display:none; z-index: 15;} 
    #mPhotoContent { width:100%; height:100%; float:left; position:absolute; top:-2px; transition: all 2s linear; display:none; z-index: 14;} 
    #mPrintContent { width:100%; height:100%; float:left; position:absolute; top:-2px; transition: all 2s linear; display:none; z-index: 14;} 
    #mWebContent { width:100%; height:100%; float:left; position:absolute; top:-2px; transition: all 2s linear; display:none; z-index: 14;} 
    #mContactContent { width:100%; height:100%; float:left; position:absolute; top:-2px; transition: all 2s linear; z-index: 14;} 
    /*Resume Page*/ 
     .mRContentHead {width:100%; height:267px; float:left; position:absolute; top:0px; display:block; z-index: 15; 
         background:transparent url('../img/wWcS-ResumeHeaderBg.png') 100% 100% repeat-x; } 

     #profilePic {width:236px; height:267px; float:left; position:absolute; left:102px; top:0px; display:block; z-index: 15;} 
     #persInfo {width:364px; height:267px; float:left; position:absolute; left:338px; top:0px; display:block; z-index: 15;}  
     #pBusCard {width:396px; height:267px; float:left; position:absolute; left:702px; top:0px; display:block; z-index: 15;} 

    /*Photography Page*/ 
     .mPhotoContentHead {width:100%; height:267px; float:left; position:absolute; top:0px; display:block; z-index: 15; 
         background:transparent url('../img/wWcS-PhotoHeaderBg.png') 100% 100% repeat-x; } 

     #profilePic {width:236px; height:267px; float:left; position:absolute; left:102px; top:0px; display:block; z-index: 15;} 
     #persInfo {width:364px; height:267px; float:left; position:absolute; left:338px; top:0px; display:block; z-index: 15;}  
     #pBusCard {width:396px; height:267px; float:left; position:absolute; left:702px; top:0px; display:block; z-index: 15;} 

    /*Print Page*/ 
     .mPrintContentHead {width:100%; height:267px; float:left; position:absolute; top:0px; display:block; z-index: 14; 
         background:transparent url('../img/wWcS-PrintHeaderBg.png') 100% 100% repeat-x; } 

     #profilePic {width:236px; height:267px; float:left; position:absolute; left:102px; top:0px; display:block; z-index: 14;} 
     #persInfo {width:364px; height:267px; float:left; position:absolute; left:338px; top:0px; display:block; z-index: 14;}  
     #pBusCard {width:396px; height:267px; float:left; position:absolute; left:702px; top:0px; display:block; z-index: 14;} 

    /*Web Page*/ 
     .mWebContentHead {width:100%; height:267px; float:left; position:absolute; top:0px; display:block; z-index: 14; 
         background:transparent url('../img/wWcS-WebHeaderBg.png') 100% 100% repeat-x; } 

     #profilePic {width:236px; height:267px; float:left; position:absolute; left:102px; top:0px; display:block; z-index: 14;} 
     #persInfo {width:364px; height:267px; float:left; position:absolute; left:338px; top:0px; display:block; z-index: 14;}  
     #pBusCard {width:396px; height:267px; float:left; position:absolute; left:702px; top:0px; display:block; z-index: 14;} 

    /*Contact Page*/ 
     .mContactContentHead {width:100%; height:267px; float:left; position:absolute; top:0px; display:block; z-index: 14; 
         background:transparent url('../img/wWcS-ContactHeaderBg.png') 100% 100% repeat-x; } 

     #profilePic {width:236px; height:267px; float:left; position:absolute; left:102px; top:0px; display:block; z-index: 14;} 
     #persInfo {width:364px; height:267px; float:left; position:absolute; left:338px; top:0px; display:block; z-index: 14;}  
     #pBusCard {width:396px; height:267px; float:left; position:absolute; left:702px; top:0px; display:block; z-index: 14;}

jQuery的

$("#mResumeLink").click(function(){ 
    $("#mPhotoContent").fadeOut(500); 
    $("#mPrintContent").fadeOut(500); 
    $("#mWebContent").fadeOut(500); 
    $("#mContactContent").fadeOut(500); 
    $("#mResumeContent").fadeIn(500); 
}); 


$("#mPhotographyLink").click(function(){ 
    $("#mResumeContent").fadeOut(500); 
    $("#mPrintContent").fadeOut(500); 
    $("#mWebContent").fadeOut(500); 
    $("#mContactContent").fadeOut(500); 
    $("#mPhotoContent").fadeIn(500); 
});  


$("#mPrintLink").click(function(){ 
    $("#mResumeContent").fadeOut(500); 
    $("#mPhotoContent").fadeOut(500); 
    $("#mWebContent").fadeOut(500); 
    $("#mContactContent").fadeOut(500); 
    $("#mPrintContent").fadeIn(500); 
});  


$("#mWebLink").click(function(){ 
    $("#mResumeContent").fadeOut(500); 
    $("#mPhotoContent").fadeOut(500); 
    $("#mPrintContent").fadeOut(500); 
    $("#mContactContent").fadeOut(500); 
    $("#mWebContent").fadeIn(500); 
});  


$("#mContactLink").click(function(){ 
    $("#mResumeContent").fadeOut(500); 
    $("#mPhotoContent").fadeOut(500); 
    $("#mPrintContent").fadeOut(500); 
    $("#mWebContent").fadeOut(500); 
    $("#mContactContent").fadeIn(500); 
});

來源

2014-04-23 deancory_

+0

你能比「它不工作」更具體？它在做什麼/不做什麼與你期望的？也許用一個小提琴推動我們：http://jsfiddle.net/ –

+0

在附註上，HTML需要一些工作。 「中心」標籤現已折舊;你有太多'h1'標籤，建議每頁只有1個;只使用tabula數據表，請考慮使用無序列表。 –

+0

這可以簡單地使用純CSS使用兒童規範來完成。在懸停時，隱藏兒童，但不是懸停並展開隱藏信息的兒童。 –

回答

0

首先要檢查的是確保您正在加載jquery庫。第二個是事件處理程序在$(document).ready(){}中連線。

下面是我幾乎這樣做的。我假設您將使用HTML5，因此我使用HGROUP標記對標題進行分組。在現實世界中，我可能不會在導航元素中執行此操作，因爲hx標籤旨在用於表示節標題（h2 - h6）或頁標題（h1）。我也將表格重構爲列表。這種設計有更多的靈活性。

HTML

<div class="mPageWrapper"> 
    <div class="mCurvyHead"> 
    </div> 
    <!--End mCurvyHead--> 
    <div class="mContentWrap"> 
     <div class="mPageWrap"> 
      <div id="mResumeLink" class="nav"> 
       <hgroup> 
        <h2>Learn About</h2> 
        <h3>Cory&nbsp;Sadler</h3> 
       </hgroup> 
      </div> 
      <div id="mPhotographyLink" class="nav"> 
       <hgroup> 
        <h2>my Portfolio of:</h2> 
        <h3>Photography</h3> 
       </hgroup> 
      </div> 
      <div id="mPrintLink" class="nav"> 
       <hgroup> 
        <h2>my Portfolio of:</h2> 
        <h3>Print&nbsp;Design</h3> 
       </hgroup> 
      </div> 
      <div id="mWebLink" class="nav"> 
       <hgroup> 
        <h2>my Portfolio of:</h2> 
        <h3>Web&nbsp;Design</h3> 
       </hgroup> 
      </div> 
      <div class="contentHolder"> 
       <div id="mResumeContent" class="content"> 
        <h2>Resume</h2> 
        <ul> 
         <li> 
          <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png" /></a> 
         </li> 
         <li> 
          <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png" /></a> 
         </li> 
         <li> 
          <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png" /></a> 
         </li> 
        </ul> 
       </div> 
       <div id="mPhotoContent" class="content"> 
        <h2>Photo Porfolio</h2> 
        <ul> 
         <li> 
          <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png" /></a> 
         </li> 
         <li> 
          <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png"></a> 
         </li> 
         <li> 
          <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png" /></a> 
         </li> 
        </ul>       
       </div> 
       <div id="mPrintContent" class="content"> 
        <h2>Print Protfolio</h2> 
        <ul> 
         <li> 
          <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png" /></a> 
         </li> 
         <li> 
          <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png" /></a> 
         </li> 
         <li> 
          <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png" /></a> 
         </li> 
        </ul> 
       </div> 
       <div id="mWebContent" class="content"> 
        <h2>Web Portfolio</h2> 
        <ul> 
         <li> 
          <a href="x"><img id="profilePic" src="img/wWcS-ProfilePic.png" /></a> 
         </li> 
         <li> 
          <a href="x"><img id="persInfo" src="img/wWcS-zzzzResumeHeaderBgzz01.png" /></a> 
         </li> 
         <li> 
          <a href="x"><img id="pBusCard" src="img/wWcS-ResumeBusCard.png" /></a> 
         </li> 
        </ul> 
       </div> 
       <div id="mContactContent" class="content"> 
       <h2>Contact</h2> 
       <ul> 
        <li> 
         <a href="x"><img id="Img1" src="img/wWcS-ProfilePic.png" /></a> 
        </li> 
        <li> 
         <a href="x"><img id="Img2" src="img/wWcS-zzzzResumeHeaderBgzz01.png" /></a> 
        </li> 
        <li> 
         <a href="x"><img id="Img3" src="img/wWcS-ResumeBusCard.png" /></a> 
        </li> 
       </ul> 
      </div>   
      </div>    
     </div> 
    </div> 
</div>

相關CSS

.nav 
{ 
    width:20%; 
    curasor:pointer; 
    display:inline-block; 
} 

.nav hgroup 
{ 
    text-align:center; 
} 

.nav h2, .nav h3 
{ 
    margin: .25em 0; 
} 

.content ul, #mContactContent ul 
{ 
    padding:0; 
} 

.content li, #mContactContent li 
{ 
    width:20%; 
    display:inline-block; 
    list-style-type:none;  
} 

.contentHolder{position:relative;} 

.content 
{ 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

#mResumeContent 
{ 
    display:block; 
}

使用Javascript/jQuery的

function switchContent(activeSelector){ 
    $(".content").not(activeSelector).fadeOut(500, function(){ 

     $(activeSelector).fadeIn(500)}); 
} 

$(document).ready(function() { 

    $("#mResumeLink").click(function() { 
     switchContent("#mResumeContent"); 
    }); 

    $("#mPhotographyLink").click(function() { 
     switchContent("#mPhotoContent"); 
    }); 


    $("#mPrintLink").click(function() { 
     switchContent("#mPrintContent"); 
    }); 


    $("#mWebLink").click(function() { 
     switchContent("#mWebContent"); 
    }); 
});/*End of $(document).ready()*/

請注意，我用了一個回調函數fadeOut。該功能將在淡出完成後執行。

這不是一個完整的解決方案，但應該讓你在正確的方向

爲首的例子：http://jsfiddle.net/b8dYb/

來源

2014-04-23 06:38:24

+0

這很好，我改變了幾件事符合我的佈局和目的，但Jquery是完美的！感謝您的幫助！！！ –

相關問題

 相關問題