使用div之间的内容切换

Question

我遇到了让div交换的问题。基本上我在页面顶部有5个可点击的div（链接）作为水平导航栏布局。导航栏下面是5个独立的div（内容），它们分别与每个链接（可点击的div）相关联，当你第一次访问页面时，只有5个内容div节目中的一个显示，其他4个被隐藏，我想要它做什么当您点击链接时，它会显示与该链接相关的内容并隐藏其余的内容div。如果这是有道理的。我是Jquery的新手，我似乎无法让它工作，我已经尝试了所有的东西，并在整个网络上试图找出来...请HelP

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

Answer 1

要检查的第一件事是确保您正在加载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/