Question

我有一个隐藏元素及其内容的脚本，并在点击时加载另一个元素及其内容。奇怪的是，它似乎堆积了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。很烦人。

Answer 1

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

如果我的解释有意义，请发信息。基本上你将#box1放在#box1中，但两个框边框仍然可见。我会尝试将边框移动到包装元素。我希望这会有所帮助。

Answer 2

通过做一些改动来修复：

    <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;

    });

});

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

Javascript返回不同样式的元素？

2 个答案: