0

我的网站上有一个选项卡式内容。基于以下 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

false我通过将externalWidth 函数作为参数解决了该解决方案。

width:element.outerWidth(false)-2,

这是一个临时解决方案，因为在我的情况下，真正的建议是保持 jquery 和 jquery-ui-slider 的版本同步并始终保持最新。

感谢您的时间。

于 2013-03-16T11:02:16.850 回答