jquery滑动内容

Question

我在滑动 div 时遇到问题:我有 3 个 div，最左边的是在点击事件时滑动。当它向左滑动时，在另外两个下方，我无法使其不可见:它在上方滑动。

工作原理:当我点击链接时，左侧的 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

如果我没有正确理解你的问题，你只需要在你的 .content div 上设置一个 z-index & 背景颜色和/或图像

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