0

我已经构建了两个 jQuery 函数，在测试它们时，我注意到如果在它们已经被触发时单击选项卡，它们会向上跳大约 10px，然后跳回正常。

我到处搜索，似乎找不到有效的解决方案。

我有以下代码：

<div id="zoe">

            <div class="floating-rim-container">

            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-7">
            </a>        
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-8">
            </a>        
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-9">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-10">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-11">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-12">
            </a>
                <div class="shadow-container">
                    <img src="images/shadow.png" class="shadow-zoe">
                    <img src="images/shadow.png" class="shadow-zoe">
                    <img src="images/shadow.png" class="shadow-zoe">
                    <img src="images/shadow.png" class="shadow-zoe">
                    <img src="images/shadow.png" class="shadow-zoe">
                    <img src="images/shadow.png" class="shadow-zoe">
                </div>
            </div>
        </div>

我有这个 CSS：

.floating-rim-container {
    width:960px;
    height:300px;
    margin:-295px auto;
    vertical-align:top;
}
.floating-rim-wrapper-black, 
.floating-rim-wrapper-zoe {
    margin: 50px 0px;
    padding: 0px 23px;
    position:relative;
    left:0;
}
.shadow-black, .shadow-zoe {
    position:relative;
    padding: 0px 8px;
}
#tab-container {
    width:960px;
    margin:0 auto;
    font-family:'helvetica-light',Helvetica,Arial,sans-serif;
}
#blabel-tab {
    background:#3d3d3d;
    border-radius:0 0 15px 15px;
    -webkit-border-radius:0 0 15px 15px;
    border:1px solid rgba(0,0,0,0.6);
    border-top:none;
    padding:6px;
    letter-spacing:2px;
    position:relative;
    z-index:100;
    box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
}
#zoe-tab {
    background:#3d3d3d;
    margin:0px 15px;
    border-radius:0 0 15px 15px;
    -moz-border-radius:0 0 15px 15px;
    -o-border-radius:0 0 15px 15px;
    border:1px solid rgba(0,0,0,0.6);
    border-top:none;
    padding:6px;
    position:relative;
    z-index:15;
    box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
}
#blabel-tab:hover, #zoe-tab:hover {
    background:rgba(0,0,0,0.9);
}
#folder-placeholder {
    width:960px;
    height:275px;
    margin:-26px auto;
    background:#000;
    position:absolute;
    z-index:-1;
}
#folder-black {
    width:960px;
    background:#eee;
    margin:-30px auto;
    border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
}
#folder-zoe {
    width:960px;
    margin:0 auto;
    background:#ccc;
    position:relative;
    top:4px;
    z-index:1;
    border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
}
#zoe {
    position:relative;
    z-index:20;
}

而这个jQuery：

function blabel_init() {
    $("#folder-black").show().animate({
        "height" : "300px"
    },600);
    $("#blabel-tab").animate({
        "top" : "295px"
    },{
        duration: 600,
        complete: function() {
            $("#blacklabel").fadeIn();
        }
    });
}
function blabel_switch() {
    $("#zoe-tab").click(function() {
        $("#blacklabel").fadeOut().promise().done(function() {
            $("#folder-black").animate({
                "height" : "0"
            });
            $("#blabel-tab").animate({
                "top" : "0"
            }).promise().done(function() {
                $("#folder-zoe").animate({
                    "height" : "300px"
                });
                $("#zoe-tab").animate({
                    "top" : "300px"
                },{
                    complete:function() {
                        $("#zoe").fadeIn();
                    }
                });
            });
        });
        return false;
    });
}
function zoe_switch() {
    $("#blabel-tab").click(function() {
        $("#zoe").fadeOut().promise().done(function() {
            $("#folder-zoe").animate({
                "height" : "0"
            });
            $("#zoe-tab").animate({
                "top" : "0"
            }).promise().done(function() {
                $("#folder-black").animate({
                    "height" : "300px"
                });
                $("#blabel-tab").animate({
                    "top" : "295px"
                },{
                    complete:function() {
                        $("#blacklabel").fadeIn();
                    }
                });
            });
        });
        return false;
    });   
}

任何帮助将不胜感激！

可以在 zoewheels.com/beta 上查看。

4

1 回答 1

0

我认为这是因为href="#" 尝试替换为href="javascript:void(0)". 另外，如果不需要href，请将其删除

于 2012-08-30T21:06:48.690 回答