0

Web サイトにタブ付きのコンテンツがあります。以下の HTML に基づいています。

<ul class="tabContainer">
</ul>

<div id="tabContent">
     <div id="contentHolder">
        <!-- The AJAX fetched content goes here -->
     </div>
   <div id="pagination"></div>
</div>

この HTML のコンテンツを管理する関数 (タブを生成し、php ページをフェッチして結果をタブ ホルダーに返す AJAX を実行します):

$(document).ready(function(){

    var Tabs = {
        '1' : 'page1.php?p='+var,
        '2' : 'page2.php?p='+var,
        '3' : 'page3.php?p='+var,

    }
    var colors = ['blue','blue','blue'];

     var topLineColor = {
        blue:'lightblue',
        blue:'lightblue',
        blue:'lightblue',}

    var z=0;
    $.each(Tabs,function(i,j){

        var tmp = $('<li><a href="" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');


        tmp.find('a').data('page',j);


        $('ul.tabContainer').append(tmp);
    })


    var the_tabs = $('.tab');

    the_tabs.click(function(e){

        var element = $(this);

        if(element.find('#overLine').length) return false;

        var bg = element.attr('class').replace('tab ','');

        $('#overLine').remove();

        $('<div>',{
            id:'overLine',
            css:{
                display:'none',
                width:element.outerWidth()-2,
                background:topLineColor[bg] || 'white'
            }}).appendTo(element).fadeIn('slow');


        if(!element.data('cache'))
        {   

            $.get(element.data('page'),function(msg){
                $('#contentHolder').html(msg);
                element.data('cache',msg);
            });
        }
        else {
        $('#contentHolder').html(element.data('cache'));

        }
        e.preventDefault();

    })

    the_tabs.eq(2).click();

});

ご覧のとおり、タブをクリックすると、その幅と同じ幅でタブの上部にオーバーラインが表示されます。

問題: id=pagination の div にjPaginatorは、 を使用するコードである が含まれますjquery-ui-slider。jPaginator の役割は、ページ分割、スライダーの表示、および div#contentHolder に配置したコンテンツのページ番号の表示です。問題は、jquery-ui-slider のライブラリを含めると、タブのオーバーラインが正しく機能しないことです。ヘッダーからライブラリ スクリプト タグを削除すると、上線の幅は問題ありません。また、クリック時にタブを切り替える方法も問題ありません。

jquery-ui-slider には、私の機能を混乱させる機能が含まれていると思いますtab()!! 助けていただければ幸いです。

4

1 に答える 1

0

falseouterWidth 関数のパラメーターとして配置することで解決策を解決しました。

width:element.outerWidth(false)-2,

私の状況での本当のアドバイスは、jquery と jquery-ui-slider のバージョンを同期させ、常に最新の状態に保つことであるため、一時的な解決策です。

お時間をいただきありがとうございます。

于 2013-03-16T11:02:16.850 に答える