Div换行使链接包含在<ul> unlickable </ul>中

时间:2014-07-31 19:54:05

标签: javascript jquery html css

我不能为我的生活想出这件事!我知道HTML有点乱,但它适用于我想做的事情。这里的问题是,一旦他们被包裹在div中,我就无法点击链接。我删除了换行和链接工作,但显然页面布局搞砸了,水平卷轴不起作用。任何帮助将不胜感激。我确定它显而易见,我只是想念,但我无法解决这个问题!

这里是css

div#wrap-gallery {
    overflow:hidden;
    position:relative;
    margin:-300px 0 0 0;
    height:950px;
    background:#000;
    z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
    background:url('LINK');
    background-size:100%;
    width:3000px;
    float:left;
    height:950px;
    position:absolute;
    z-index:-999999999999999999999999999999999999999999999999999999999999;
}

ul#gallery2 {
    background:url('LINK');
    background-size:100%;
    background-repeat:no-repeat;
    opacity:0.6;
    width:3000px;
    float:left;
    height:950px;
    position:absolute;
    z-index:-99999999999999999999999999999999999999999999999999999999999999999;
}

ul#bio {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:510px;
    margin-left:400px;
    font-size:40px;
    color:#fff;
    z-index:999999999999999999999999999999999999999999999999999999999999999;
}



ul#music {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:-215px;
    margin-left:970px;
    font-size:40px;
    color:#fff;
    z-index:999999;
}

ul#lyrics {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:10px;
    margin-left:1500px;
    font-size:40px;
    color:#fff;
    z-index:99999999999;
}

    ul#dates {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:50px;
    margin-left:1100px;
    font-size:40px;
    color:#fff;
    z-index:999999999999999999;
}

    ul#gallery3 {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:-425px;
    margin-left:2000px;
    font-size:40px;
    color:#fff;
    z-index:999999999999999999999999999;
}

    ul#store {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:160px;
    margin-left:2375px;
    font-size:40px;
    color:#fff;
    z-index:99999999999999999999999999999999999;
}

    ul#contact {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:120px;
    margin-left:2650px;
    font-size:40px;
    color:#fff;
    z-index:9999999999999999999999999999999999999999;
}


ul#gallery li{
  display:block;
}
ul#gallery li img{
  float:left;
  height:100&#37;;
}

#lightbox {
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        background:url(LINK) repeat; 
        text-align:center;
    }
    #lightbox p {
        text-align:right; 
        color:#fff; 
        margin-right:20px; 
        font-size:12px; 
    }
    #lightbox img {
        box-shadow:0 0 15px #111;
        -webkit-box-shadow:0 0 15px #111;
        -moz-box-shadow:0 0 15px #111;
        max-width:940px;
    }
    #content img{
      height:90%;
      max-width:100%;
    }


    @media only screen and (min-width: 1280px) {

      div#wrap-gallery {
    overflow:hidden;
    position:relative;
    margin:-300px 0 0 0;
    height:1000px;
    background:#000;
    z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
    background:url('{image:pano}');
    background-size:100%;
    width:3000px;
    float:left;
    height:1000px;
    position:absolute;
    z-index:-999999999999999999999999999999999999999999999999999999999999;
}

ul#gallery2 {
    background:url('{image:map}');
    background-size:100%;
    background-repeat:no-repeat;
    opacity:0.6;
    width:3000px;
    float:left;
    height:1000px;
    position:absolute;
    z-index:-9999999999999999999999999999999999999999999999999999999999;
}  

    }

以下是HTML:

<div id="wrap-gallery">
    <ul id="gallery">
        <ul id="gallery2">
            <ul id="bio">
                <li><a href="LINK">Bio</a></li>
            </ul>
            <ul id="music">
                <li><a href="LINK">Music</a></li>
            </ul>
            <ul id="lyrics">
                <li><a href="LINK">Lyrics</a></li>
            </ul>
            <ul id="dates">
                <li><a href="LINK">Dates</a></li>
            </ul>
            <ul id="gallery3">
                <li><a href="LINK">Gallery</a></li>
            </ul>
            <ul id="store">
                <li><a href="LINK">Store</a></li>
            </ul>
            <ul id="contact">
                <li><a href="LINK">Contact</a></li>
            </ul>
        </ul>
    </ul>
</div>

和一些js:

var moveWin = {
    availW: 0,
    galW: 0,
    moveDis: 0,

    init: function(){
        this.availW = $(document).width();
        this.galW = $('#gallery').width() - this.availW;

        this.moveDis = this.galW / this.availW;

        $(document).mousemove(function(e){
            moveWin.displace(e);
        });
    },

    displace: function(e){
        var x = e.pageX * moveWin.moveDis;
        $('#gallery').css({left: -x});
        $('#status').html(e.pageX);
    }
}

jQuery(document).ready(function($) {
    moveWin.init();

    $('.lightbox_trigger').click(function(e) {

        e.preventDefault();

        var image_href = $(this).attr("href");

        if ($('#lightbox').length > 0) { // #lightbox exists

            $('#content').html('<img src="' + image_href + '" />');

            //$('#lightbox').show();

            $('#lightbox').fadeIn('2000');
        }

        else { 

            var lightbox = 
            '<div id="lightbox">' +
                '<p>Click to close</p>' +
                '<div id="content">' + 
                    '<img src="' + image_href +'" />' +
                '</div>' +  
            '</div>';

            $('body').append(lightbox);
        }

    });

    $('#lightbox').live('click', function() { 
        $('#lightbox').hide();
    });

});

再次感谢您提供的任何帮助!

0 个答案:

没有答案