jquery滑動內容

Question

我有滑動divs的問題：我有3個divs，並且最左邊的滑動點擊事件。當它向左滑動時，在另外兩個下面，我無法將它隱藏起來：它在上面滑動。

它是如何工作的：當我點擊鏈接時，萊夫特賽德DIV應該滑出，變化的內容，然後在下滑

下面是我的CSS，HTML和JavaScript，它加載的內容...

。 CSS：

body, html {margin: 0; padding: 0; height: 100%; } 
body { 
    background-size: 100%; 
    background: #000 url(../imgs/bg-img.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 
} 
a{outline:0;} 
#page-h { 
    width: 810px; 
    float: right; 
    background: url(../imgs/bck_main.png) repeat-y right; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    color: #fff;  
} 
.leftside { 
    background: url(../imgs/bck_dark.png); 
    width: 280px; padding: 270px 40px 0 40px; 
    float: left; 
    color: #fff; 
    overflow: hidden; 
    position: relative; 
    z-index:-1; //to slide under content, but is still visible on the right side 
} 
.slider { 
    width: 280px; 
    font-size: 12px; 
    color:#d5d0b5; 
    position:relative;/*if I put absolute, the div slides left*/ 
} 
.content{ 
    width:450px; 
    float:right; 
    position:relative; 
} 
.rightside{ 
    width:210px; 
    display:inline; 
    float:left; 
    padding-top: 239px; 
    font-family: Georgia; 
    font-size: 12px; 
    color:#ffffdc; 
    text-align:center; 
} 

HTML：

<div id="page-h"> 
    <div class="leftside slider" id="resize-me"></div>  
    <div class="content"> 
     <div class="navigation"> 
      <nav class="main-nav"> 

       <h3 class="main"><a href="main.html"></a></h3> 
        <h3 class="house"><a href="house.html"></a></h3> 
        <ul> 
         <li><a href="about-us.html">About</a></li> 
         <li><a href="about-us.html">About</a></li> 
         <li><a href="about-us.html">About</a></li> 
        </ul> 
      </nav> 
     </div> 
     <aside class="rightside"> 
      <div class="sth"><p>test</p> 
      <div class="more-info"><a href="info.html">More information</a></div> 
      </div> 
     </aside> 
    </div> 
</div> 

的JavaScript/jQuery的：

// Check for hash value in URL 
    var hash = window.location.hash.substr(1); 
    var href = $('.main-nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html .slider'; 
      $('.slider').load(toLoad) 
     } 
    }); 

    $('.main-nav li a').click(function(){ 
     var toLoad = $(this).attr('href')+' .slider'; 
     $('.slider').animate({left:"360px"},1000, loadContent); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
      $('.slider').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
      $('.slider').animate({left:"0px"},1000); 
     } 
     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 
    return false; 
    }); 

Answer 1

如果我理解你的問題正確，你只需要設置的z-index &背景顏色和/或圖片上的。內容的div

.content{ 
    width:450px; 
    float:right; 
    position:relative; 
    z-index:2; 
    background:#000 
}