jQuery隱藏/顯示不同的元素排除故障

我試圖編程一個網站，現在，我已經設計了我的前面，我想要一個標題中的鏈接說「投資組合」應該隱藏除了頁眉和頁腳之外的所有內容。jQuery隱藏/顯示不同的元素排除故障

我的HTML是這樣的：

<div class="header" id="front-show"> 
     <div class="header-kevin-vfx"> 
      <a href="#"><h1 id="front-show">Kevin VFX</h1></a> 
     </div> 

     <div class="header-portfolio" id="portfolio-show"> 
      <a href="#"><h1>Portfolio</h1></a> 
     </div> 
    </div> 

<div class="content-wrapper"> 
    <div class="site-title hidden"> 
     <h1>Kevin VFX</h1> 
     <p>Marketing the modern way</p> 
    </div> 

</div> 

<div class="portfolio-wrapper"> 
    <div class="portfolio"> 
     <h1>Portfolio</h1> 
     <p>Click a video thumbnail to watch a video</p> 
    </div> 
</div>  

    <div class="footer"> 
     <div class="copyright"> 
      <p>Copyright 2016 © Kevin From</p> 
     </div> 
    </div>

我的CSS：

div.content-wrapper { 
    min-width: 100%; 
    min-height: 100%; 
    background-color: rgba(0,0,0,0.1); 
    z-index:1; 
    position:fixed; 
    transform:translate(-50%,-50%); 
    top:50%;left:50%; 
} 

div.header { 
    z-index:3; 
    height:70px; 
    background-color:rgba(204,204,204,0.3); 
    width:100%; 
    position: absolute; 
    top:0; 
} 

div.header a h1 { 
    text-decoration: none; 
    color:rgba(250,250,250,0.7); 
    text-transform: uppercase; 
} 

div.header a h1:hover { 
    color:rgba(255,255,255,1); 
} 

div.header div.header-kevin-vfx { 
    position:absolute; 
    top:0; 
    left:0; 
    padding-left:7px; 
} 

div.header div.header-portfolio{ 
    position:absolute; 
    right:0; 
    top:0; 
    padding-right:7px; 
} 

div.footer { 
    z-index:3; 
    height:30px; 
    background-color:rgba(204,204,204,0.3); 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 

div.footer div.copyright p { 
    text-align: center; 
    font-size:1em; 
}

和最後我的腳本是：

$(document).ready(function() { 
$('div.portfolio-wrapper').hide();   
$('div.hidden') 
     .fadeIn(1500) 
     .slideUp(500) 
     .slideDown(500) 
     .removeClass('hidden'); 
}); 

$('#front-show').onclick(function() { 
    $('.portfolio-wrapper').hide(500).delay(500); 
    $('.content-wrapper').show(500); 
}); 

$('#portfolio-show').onclick(function() { 
    $('.content-wrapper').hide(500).delay(500); 
    $('.portfolio-wrapper').show(500); 
});

非常感謝您的幫助，提前！ -Kevin

來源

2016-10-21 Kevin From

沒有'的onclick（）'jQuery的功能，它必須是'。點擊（）'或'。對（ '點擊'，（）的函數）' – DaniP

它的更好，如果你綁定功能到錨標記檢查此https://jsfiddle.net/9zxzwedt/ – DaniP

我試圖改變腳本和HTML匹配你的小提琴，但仍然沒有改變。我還將Boostrap和jQuery下載到了我的電腦上，因爲此刻我正在慢速上網。 –

$('#front-show').find('.content-wrapper, .portfolio-wrapper').hide();

來源

2016-10-21 15:19:10

您是否要我在我的定位標記上添加ID，然後使用您發送的腳本，還是應該在包含我的定位標記的DIV上使用ID？ –

你可以使用你現有的div。我以爲你想添加一個鏈接，在一秒鐘內看到更新的答案 –

仍然無法正常工作，恐怕 –

jQuery隱藏/顯示不同的元素排除故障

回答

相關問題