0

我有一个脚本，它隐藏一个元素及其内容，并在单击时加载另一个元素及其内容。奇怪的是，它似乎把 1px 的边框堆积起来，返回第二个有 2px 边框的元素，而显示它仍然有 1。

这是链接代码：

<li ><a href="plumbing.php">Plumbing</a></li>

这是有问题的元素：

     <div id="box1">
        <ul class="tabs">
            <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
            <li><a href="#" rel="tabs2">Tab #2</a></li>
            <li><a href="#" rel="tabs3">Tab #3</a></li>
        </ul>

        <div class="tab-content" id="tabs1">Tab #1 content</div>
        <div class="tab-content" id="tabs2">Tab #2 content</div>
        <div class="tab-content" id="tabs3">Tab #3 content</div>
    </div>

除了只有 1 个选项卡和 1 个选项卡内容（出于测试目的）之外，加载页面上的元素是相同的。

风格：

#box1{width:700px;height:100%;float:left;background:url(../images/box1bg_03.gif);background-repeat:repeat-x;border: 1px solid #d0ccc9;}

Javascript：

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.navcontent li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #box1';
            $('#box1').load(toLoad)
        }                                           
    });

    $('.navcontent li a').click(function(){

        var toLoad = $(this).attr('href')+' #box1';
        $('#box1').hide('fast',loadContent);
        $('#load').remove();
        $('#box1').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#box1').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#box1').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

从理论上讲，除了边界之外，一切都运行良好 - http://imgur.com/a/isqgH。很烦人。

4

2 回答 2

1

jQueryload将内容插入到指定的容器中。所以我的猜测是，即使你用#box1相同的“元素”替换内容，你只是#box1用新内容填充内部。您实际上并没有替换#box1导致它翻倍的边框。

如果我的解释是有道理的，我想知道。基本上你正在放入#box1，#box1但两个框边框仍然可见。我会尝试将边框移动到包装元素。我希望这有帮助。

于 2012-06-26T22:31:06.133 回答
0

通过进行一些更改来修复： 

    <div id="box1">
        <div id="box1content"> //wrap up in extra div
            <ul class="tabs">
                <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
                <li><a href="#" rel="tabs2">Tab #2</a></li>
                <li><a href="#" rel="tabs3">Tab #3</a></li>
            </ul>

            <div class="tab-content" id="tabs1">Tab #1 content</div>
            <div class="tab-content" id="tabs2">Tab #2 content</div>
            <div class="tab-content" id="tabs3">Tab #3 content</div>
        </div>
    </div>

对代码进行相应的修复：

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.navcontent li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #box1content';//change to fixed div
            $('#box1content').load(toLoad)//change to fixed div
        }                                           
    });

    $('.navcontent li a').click(function(){

        var toLoad = $(this).attr('href')+' #box1content';//change to fixed div
        $('#box1content').hide('fast',loadContent);//change to fixed div
        $('#load').remove();
        $('#box1content').append('<span id="load">LOADING...</span>');//change to fixed div
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#box1content').load(toLoad,'',showNewContent())//change to fixed div
        }
        function showNewContent() {
            $('#box1content').show('normal',hideLoader());//change to fixed div
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

最终的结果是动画有点不同，只有文本淡入淡出，但它完成了工作。

于 2012-06-26T23:08:33.117 回答