0

要素とそのコンテンツを非表示にし、クリック時に別の要素とそのコンテンツをロードするスクリプトがあります。奇妙なことに、1px の境界線を積み重ねるように見え、2px の境界線を持つ 2 番目の要素を返しますが、まだ 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実際には、二重になっている境界線を置き換えているわけではありません。

私の説明が理にかなっているならIdk。基本的には入れ#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 に答える