Javascript 返回具有不同样式的元素？

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 中，但两个框的边框仍然可见。我会尝试将边框移动到包装器元素。我希望这会有所帮助。