通过php加载时,JQuery UI无法检测CSS样式

时间:2012-04-02 21:15:38

标签: javascript jquery css jquery-ui

当用户使用我前面提到的question的建议点击按钮时,我正在使用JQuery UI生成并加载标签。它可以很好地加载数据,但它不会应用页面静态时存在的CSS样式。

function createTab2() {
       // this will add a tab
       $("#tabs").tabs("add","#tabs-2","1: Population Density");     
       $("#tabs-2").load('tabs/tab2.php');
       $('#tabs').tabs('select', "#tabs-2");           
}

我的原始静态文件包含以下内容:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab One</a></li>
        <li><a href="#tabs-2">Tab Two</a></li>      
    </ul>
    <div id="tabs-1" style="height:300px;">     <!-- Start Tab 1 -->                
            <form >
                <div id="radio-b1">
                    <input type="radio" id="b1" name="type" value="1"   /><label for="b1">Radio Button 1</label>                        
                </div>
            </form>     
    </div>      <!-- End Tab 1 -->  

    <div id="tabs-2" style="height:250px;">     <!-- Start Tab 2 -->
            <form >
                <div id="radio-p1">
                    <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
                </div>
            </form>

    </div>      <!-- End Tab 2 -->

我用一个调用javascript函数Tab 2的按钮替换了createTab2(),并在tab2.php中保存了以下代码:

<div >          
        <form >
            <div id="radio-p1">
                <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
            </div>
        </form>             
</div>      <!-- End Tab 2 -->

我不完全理解在创建属性时是否需要向#tab-2添加属性(例如设置id值或其他属性。

1 个答案:

答案 0 :(得分:1)

您编写的javascript函数不会自动为您的元素添加样式。它只会使用包含的jqueryui.css中的样式。我看到你在静态标记的tabs-2中只有一个样式行,如果这是你想要应用的唯一样式,你应该只写一个js行来添加这个样式。

这是您在tab-2样式中的行

  

风格= “高度:250像素;”

要应用此样式,您可以通过以下方式执行此操作

  

$(“#tabs-2”)。css(“height”,“250px”);

在加载标签之前或在调用选项卡-2之前

之前执行此操作